Configurar un store con Redux Toolkit en React te permite manejar estado global de forma sencilla, sin la verbosidad del Redux clásico. Aquí aprenderás a montar la estructura inicial de un proyecto con Vite, TypeScript y Redux Toolkit para construir una to-do list de emojis con acciones para agregar y eliminar elementos. Es ideal si ya entiendes useReducer y quieres dar el salto al estado global.

Por qué usar Redux Toolkit en lugar de Redux clásico

Redux Toolkit es la forma oficial recomendada para trabajar con Redux porque reduce los pasos de configuración y agrupa utilidades clave como configureStore y createAction. Antes, montar un store implicaba mucho boilerplate; ahora es directo.

¿Qué es Redux Toolkit? Es una librería oficial que envuelve Redux con herramientas que simplifican la creación del store, los reducers y las acciones. Te ahorra código repetitivo y te da una API más clara.

La idea central es que el flujo entre componentes, actions y reducers deje de ser interno y pase a ser global, accesible desde cualquier parte de tu aplicación.

Cómo iniciar el proyecto con Vite y TypeScript

Primero creamos el proyecto base con Vite usando React y TypeScript. Esta combinación te da tipado estático y un entorno de desarrollo rápido.

Los pasos son los siguientes:

• Ejecutar npm create vite@latest y nombrar el proyecto, por ejemplo myreactreduxapp.
• Elegir React con TypeScript como stack.
• Entrar a la carpeta y correr npm install.
• Levantar el servidor con npm run dev.
• Instalar Redux Toolkit con npm install @reduxjs/toolkit.

Una vez instalado, ya tienes todo lo necesario para empezar a configurar el estado global [02:30].

Qué estructura de carpetas conviene usar

Dentro de src organizamos el código separando responsabilidades. Esto facilita escalar la aplicación cuando añadas más features.

La estructura queda así:

• app/store.ts para la configuración del store.
• components/TodoList.tsx para el componente de la lista.
• features/Todos/todoActions.ts para las acciones.
• features/Todos/todoReducer.ts para el reducer.

Esta separación entre app, components y features es un patrón común cuando trabajas con Redux, porque cada feature encapsula su propia lógica.

Cómo configurar el store con configureStore

El store es el contenedor del estado global. Con configureStore de Redux Toolkit, lo montas en pocas líneas y obtienes integración automática con Redux DevTools.

En store.ts importamos configureStore y exportamos una constante store que recibe un objeto con la propiedad reducer. Dentro le pasamos un reducer combinado, en este caso todos apuntando a todoReducer, que crearemos más adelante [05:10].

ts import { configureStore } from '@reduxjs/toolkit' import todoReducer from '../features/Todos/todoReducer'

export const store = configureStore({ reducer: { todos: todoReducer, }, })

¿Para qué sirve configureStore? Crea y configura el store de Redux con buenas prácticas por defecto, como middlewares para detectar mutaciones y soporte de DevTools. Solo necesitas pasarle tus reducers.

Cómo inferir tipos para RootState y AppDispatch

Una ventaja enorme de usar TypeScript con Redux Toolkit es que puedes inferir los tipos del estado y del dispatch directamente del store, sin definirlos a mano.

Agregamos dos exportaciones de tipo al final de store.ts:

ts export type RootState = ReturnType<typeof store.getState> export type AppDispatch = typeof store.dispatch

Con RootState cualquier componente sabrá qué forma tiene el estado global, y con AppDispatch tendrás autocompletado al disparar acciones. Es tipado automático, sin duplicar trabajo.

Cómo crear acciones con createAction

Las acciones describen qué cambio quieres hacer en el estado. Con createAction defines su nombre y el tipo del payload en una sola línea.

En todoActions.ts necesitamos dos acciones: una para agregar y otra para eliminar elementos de la lista. La de agregar recibe un string porque captura el texto del input del usuario, mientras que la de eliminar recibe un number porque trabaja con ids numéricos [09:45].

ts import { createAction } from '@reduxjs/toolkit'

export const addTodo = createAction<string>('todos/add') export const removeTodo = createAction<number>('todos/remove')

¿Qué hace createAction? Genera un action creator tipado que produce objetos de acción con un type y un payload. El primer argumento entre <> define el tipo del payload.

El string 'todos/add' y 'todos/remove' siguen la convención feature/acción, que ayuda a identificar a qué parte del estado pertenece cada acción.

Qué viene después en el flujo de Redux

Con el store configurado y las acciones listas, el siguiente paso es crear el reducer que escuche estas acciones y actualice el estado en consecuencia. El reducer será quien decida cómo se modifica la lista al recibir addTodo o removeTodo.

La lógica del componente TodoList después conectará el input, hará dispatch de las acciones y leerá el estado con los hooks useSelector y useDispatch tipados con RootState y AppDispatch.

¿Ya tienes claro cómo organizar tu primer store? Cuéntame en los comentarios qué feature vas a construir tú con Redux Toolkit.