Flujo de Comunicación en Redux: Estado Global y Acciones

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.