Descripción
Implementa la gestión de una lista de tareas en una aplicación React mediante el estado global usando Redux Toolkit.
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
.
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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
Solución al ejercicio
¡Desbloquea la solución completa!
Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
Practica con exámenes de React
Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.
Retroalimentación
Aprende de tus errores
Progreso
Mide tu avance
Certificación
Valida tus habilidades
Únete a miles de desarrolladores mejorando sus habilidades