https://github.com/enriquesfranco/redux-lab

Aprendiendo redux toolkit
https://github.com/enriquesfranco/redux-lab

react redux redux-toolkit typescript

Last synced: about 1 month ago
JSON representation

Aprendiendo redux toolkit

• Host: GitHub
• URL: https://github.com/enriquesfranco/redux-lab
• Owner: enriqueSFranco
• Created: 2025-03-14T17:05:08.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-04-14T20:24:15.000Z (about 2 months ago)
• Last Synced: 2025-04-14T21:32:55.427Z (about 2 months ago)
• Topics: react, redux, redux-toolkit, typescript
• Language: TypeScript
• Homepage:
• Size: 117 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🚀 Aprendí Redux Toolkit (Siguiendo la Documentación Oficial)

En este repositorio, comparto mi aprendizaje y práctica con **Redux Toolkit**, el cual es una herramienta poderosa para gestionar el estado en aplicaciones de React. Me he guiado principalmente por la [documentación oficial de Redux Toolkit](https://redux-toolkit.js.org/) para entender cómo funciona y cómo aplicarlo en proyectos reales.

---

## 📚 Recursos Utilizados

Todo el aprendizaje y los ejemplos que encontrarán en este repositorio están basados en la **documentación oficial de Redux Toolkit**. Aquí están los recursos clave que utilicé:

- **Documentación Oficial**: [redux-toolkit.js.org](https://redux-toolkit.js.org/)

- **Tutoriales de Redux**: [Tutorial Redux](https://redux.js.org/tutorials/fundamentals/part-1-overview)

- **API Reference**: [API Reference de Redux Toolkit](https://redux-toolkit.js.org/api/createSlice)

---

## 📍 Qué Aprendí

### 1. **Conceptos Básicos de Redux Toolkit** 🎓

- **store**: Creación del estado central de la aplicación.

- **actions**: Acciones para modificar el estado.

- **reducers**: Funciones que definen cómo el estado cambia.

- **dispatch**: Método para despachar acciones y actualizar el estado.

- **createSlice**: Simplificación de la creación de reducers y acciones en un solo lugar.

### 2. **Herramientas de Redux Toolkit** ⚙️

- **configureStore**: Configuración simplificada del store, con middleware incluido.

- **createAsyncThunk**: Facilita la gestión de operaciones asíncronas como peticiones API.

- **createSlice**: Generación de reducers y acciones con un solo método.

- **RTK Query**: Gestión avanzada de datos remotos y caching (opcional, pero muy útil).

### 3. **Flujo de Datos con Redux Toolkit** 🔄

- Cómo gestionar el estado global de una aplicación.

- Implementación de operaciones asíncronas con `createAsyncThunk`.

- Configuración de reducers y acciones de manera eficiente utilizando `createSlice`.

### 4. **Integración con React** 🖥

- Conexión del estado de Redux con los componentes de React utilizando `useSelector` y `useDispatch`.

- Actualización del estado de la aplicación desde los componentes de React.

- Ejemplo básico de cómo conectar una interfaz de usuario con Redux Toolkit.

---

## 🔧 Estructura del Proyecto

Este repositorio está estructurado para mostrar varios ejemplos prácticos de cómo usar Redux Toolkit.

- **src/**

  - **store.js**: Configuración del store utilizando `configureStore`.

  - **features/**: Directorio con los "slices" de Redux, donde se definen el estado y las acciones.

  - **components/**: Componentes de React que interactúan con Redux.

  - **App.js**: Componente principal donde se muestra la integración con Redux.

---

## 🧑‍💻 Proyectos y Ejemplos

He creado ejemplos prácticos para demostrar cómo implementar Redux Toolkit en situaciones reales.

### 1. **Contador con Redux Toolkit** 🧮

Un simple contador que utiliza Redux Toolkit para manejar el estado global del contador.

### 2. **Gestión de Tareas** ✅

Un ejemplo de aplicación para gestionar tareas (to-do list) con la capacidad de agregar y eliminar tareas, usando **`createSlice`** para manejar el estado de las tareas.

### 3. **Integración con API** 🌐

Ejemplo de cómo realizar solicitudes API con **`createAsyncThunk`**, mostrando cómo manejar estados de carga, éxito y error mientras se gestionan datos remotos.

---

## 📈 Mi Progreso

| Tema                             | Estado        |

|-----------------------------------|---------------|

| Configuración del Store           | ✅ Completado  |

| Creación de Slices                | ✅ Completado  |

| Operaciones Asíncronas (Async)    | ✅ Completado  |

| Integración con React             | ✅ Completado  |

| RTK Query (avanzado)              | 🔄 En progreso |

---

## 📝 Próximos Pasos

- **Explorar RTK Query** para mejorar la gestión de datos remotos.

- **Realizar una aplicación más compleja** para practicar la integración de Redux Toolkit con React.

> *"La gestión de estado nunca ha sido tan fácil con Redux Toolkit."* ✨