Ejercicio de programación con React: Estado global con Redux Toolkit
0h 25m
React: reto de implementación del estado global con Redux Toolkit. Aprende a gestionar tareas en React usando Redux y React-Redux.
Implementa una aplicación con React que maneje una lista de tareas utilizando Redux Toolkit para la gestión del estado global. La tarea principal es configurar un store utilizando configureStore
y crear un slice llamado tareas
con createSlice
. El estado inicial será un array vacío y se deberán definir las acciones y reducers necesarios: añadirTarea
, eliminarTarea
y cambiarEstadoTarea
.
Además, se requerirá implementar un componente ListaTareas
conectado al estado global mediante useSelector
y useDispatch
. Este componente debe permitir añadir, eliminar y cambiar el estado de completado de las tareas. También, se debe utilizar el componente Provider
de react-redux
para proveer el store a la aplicación completa.
Instrucciones:
- Configuración del store: Crea un archivo
store.js
y utilizaconfigureStore
de Redux Toolkit para configurar el store. Este store debe contener un slice llamadotareas
. - Creación del slice de tareas:
- Define un slice llamado
tareas
utilizandocreateSlice
. - El estado inicial debe ser un array vacío
[]
. - Define las siguientes acciones y reducers:
añadirTarea
: Añade una nueva tarea al array.eliminarTarea
: Elimina una tarea por su identificador.cambiarEstadoTarea
: Cambia el estado de completada de una tarea.
- Define un slice llamado
- Proveer el store a la aplicación: Usa el componente
Provider
dereact-redux
para proveer el store a la aplicación. - Interacción con el estado global:
- Crea un componente
ListaTareas
que muestre la lista de tareas y permita interactuar con ellas. - Usa
useSelector
para obtener la lista de tareas del estado global. - Usa
useDispatch
para despachar las accionesañadirTarea
,eliminarTarea
ycambiarEstadoTarea
.
- Crea un componente
- Implementación de la interfaz:
- El componente
ListaTareas
debe mostrar cada tarea con un botón para eliminarla y un checkbox para marcarla como completada. - Debe haber un formulario para añadir nuevas tareas con un campo de texto y un botón.
- El componente
Todos los ejercicios de programación de React
Evalúa tus conocimientos con ejercicios de programación en React de tipo Test, Puzzle, Código y Proyecto con VSCode.
Props y manejo de datos entre componentes
Definición y manejo de rutas
Conocimiento general de React
Galería de imágenes en React
Eventos en React
Gestor de tareas con React
Custom Hooks para servicios compartidos
Nuevos métodos create de React Router
Solicitudes HTTP con Fetch API
Instalar React y crear nuevo proyecto
Renderizado condicional
Introducción a JSX
Manejo de clases y estilos
Introducción a React Router
Solicitudes HTTP con Axios
Estado local con useState y useReducer
Estado y ciclo de vida de los componentes
Hooks para gestión de estado complejo y contexto
Componentes funcionales
Certificados de superación de React
Supera todos los retos de React y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
React
Estado global con Redux Toolkit
Servicios y gestión de estado