Aprende a manejar estado global con Redux Toolkit en React y TypeScript paso a paso. Verás cómo pasar de estados locales complejos con useReducer a un flujo claro con store, actions y reducer, aplicado a un Emoji To-Do List donde agregas con el input y eliminas con un clic.
¿Qué flujo de comunicación resuelve Redux Toolkit?
Configurar un estado global permite que múltiples componentes lean y actualicen la misma fuente de verdad. El flujo es sencillo: se dispara una acción, el reducer interpreta la intención y muta el estado en el store, y los componentes reaccionan. Así, lo que antes era interno pasa a ser compartido y consistente entre vistas.
- De estados locales con useReducer a gestión global con Redux.
- Agregar elementos al escribir y presionar Enter en el input.
- Eliminar elementos con un clic sobre cada ítem.
- Menos pasos y menos fricción gracias a Redux Toolkit.
¿Cómo se inicia el proyecto y la estructura de archivos?
Primero se crea la base con Vite, se instala y se corre en local. Luego, se organiza el código separando la configuración del store, los componentes y el feature de todos.
¿Cómo crear el proyecto con Vite y React TypeScript?
npm create vite@latest MyReactReduxApp
# elegir React y TypeScript
cd MyReactReduxApp
npm install
npm run dev
# abrir en el navegador: localhost indicado por Vite
¿Qué estructura de carpetas soporta el estado global?
Organiza por responsabilidad: app para el store, components para la UI, y features para dominios como todos.
src/
app/
store.ts
components/
TodoList.tsx
features/
todos/
todoActions.ts
reducer.ts
- Elimina archivos de plantilla de Vite para partir de cero.
- Mantén el feature de todos encapsulado: acciones y reducer juntos.
¿Cómo configurar el store y definir tipos en TypeScript?
Con Redux Toolkit la configuración es directa: se instala la librería y se usa configureStore con un único objeto de reducers. Además, se infieren tipos para el estado y el dispatch.
¿Cómo instalar y usar Redux Toolkit?
# instalar herramientas de Redux Toolkit
npm install redux-js-toolkit
Configura el store y registra el reducer de todos.
// src/app/store.ts
export const store = configureStore({
reducer: {
todos: todoReducer, // se implementará para agregar/eliminar
},
})
// Tipos inferidos (idea):
// export type RouteState = ReturnType<...> // inferir el tipo del estado a partir del store.
// export type AppDispatch = typeof store.dispatch
configureStore: crea el contenedor del estado global.todos: todoReducer: registra el dominio de todos para agregar y eliminar.- Tipado con TypeScript: se infiere el tipo del estado (RouteState) y el de
dispatch.
¿Cómo crear las acciones addTodo y removeTodo?
Las acciones declaran la intención de cambio. Con createAction se especifica el tipo y el dato que viaja.
// src/features/todos/todoActions.ts
export const addTodo = createAction<string>('Todo add')
export const removeTodo = createAction<number>('Todo remove')
addTodo<string>: recibe el texto del input para el nuevo emoji o tarea.removeTodo<number>: recibe el ID numérico para eliminar un elemento.- Estas acciones serán atendidas por el reducer para mutar el estado.
¿Qué comportamiento tendrá la UI del todo list?
- Un input para escribir y presionar Enter para agregar.
- Una lista que muestra todos los elementos agregados.
- Clic en un elemento para eliminarlo del listado.
¿Tienes dudas sobre la estructura o las acciones? Comenta cómo tiparías los IDs o qué formato de tipo usarías para el estado global.
