Summary  
This chapter covers organizing a project’s directory structure and defining the shape of data objects for state management.

General domain of usage  
Task management applications


En esta sección, construirás una sencilla aplicación de **Gestor de Tareas**.

La aplicación permitirá a los usuarios:

* Crear tareas;
* Marcar tareas como completadas;
* Eliminar tareas;
* Cargar tareas iniciales desde una API.



## Estructura del proyecto

```bash
src/
  app/
    store.js
  features/
    tasks/
      tasksSlice.js
  components/
    TaskForm.jsx
    TaskList.jsx
    TaskItem.jsx
  App.jsx
  main.jsx
```



## Estructura de la tarea

Cada tarea tendrá el siguiente formato:

```javascript
{
  id: 1,
  title: 'Learn Redux Toolkit',
  completed: false
}
```

Esta estructura es sencilla, pero lo suficientemente realista para practicar correctamente con Redux Toolkit.



Se definió la estructura del proyecto y la forma de los datos. Esto proporciona una base clara para construir el estado y las funcionalidades en los siguientes pasos.

Aprende a gestionar el estado complejo de aplicaciones en React utilizando Redux Toolkit. Comprende cuándo realmente se necesita Redux, construye el estado con slices, maneja datos asíncronos y conecta todo en un flujo predecible.

Comprender por qué existe Redux Toolkit y cuándo se vuelve útil. Reconocer cómo la complejidad del estado aumenta en aplicaciones reales y por qué los enfoques simples dejan de escalar.

Instalar Redux Toolkit y configurar el store. Conectar Redux a una aplicación React y comprender cómo fluye la información a través del sistema.

Definir el estado utilizando slices y organizar la lógica de manera clara. Crear reducers, utilizar acciones generadas y mantener el estado manejable a medida que la aplicación crece.

Leer datos del store utilizando useSelector y actualizarlos con useDispatch. Estructurar el estado correctamente y evitar errores comunes al trabajar con datos compartidos.

Obtener datos de APIs utilizando createAsyncThunk. Gestión de estados de carga y error y mantenimiento de la interfaz de usuario sincronizada con actualizaciones asíncronas.

Dividir el estado en múltiples slices y organizar los archivos por funcionalidad. Combinar los reducers de manera ordenada y mantener una estructura clara a medida que la aplicación crece.

Construcción de una aplicación completa utilizando Redux Toolkit. Implementación de funciones CRUD, manejo de datos asíncronos y mejora de la experiencia del usuario con estados de carga y error.

Configuración del Proyecto y Estructura de Datos

Estructura del proyecto

Estructura de la tarea