Ejercicio de programación con React: Estado global con Redux Toolkit

Código
Práctica
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:

  1. Configuración del store: Crea un archivo store.js y utiliza configureStore de Redux Toolkit para configurar el store. Este store debe contener un slice llamado tareas.
  2. Creación del slice de tareas:
    • Define un slice llamado tareas utilizando createSlice.
    • 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.
  3. Proveer el store a la aplicación: Usa el componente Provider de react-redux para proveer el store a la aplicación.
  4. 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 acciones añadirTarea, eliminarTarea y cambiarEstadoTarea.
  5. 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.
Empezar ejercicio de programación

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.

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

React

Estado global con Redux Toolkit

Servicios y gestión de estado

Otros tutoriales de programación con React