Configurar Redux desde cero implica escribir mucho código repetitivo: action types, action creators, reducers y paquetes adicionales como redux-immutable o redux-thunk. Redux Toolkit resuelve ese problema al integrar inmutabilidad, slices y configuración simplificada en una sola librería, ideal para quienes quieren reducir boilerplate y aprender Redux sin tropezar con su curva inicial.

¿Por qué usar Redux Toolkit en lugar de Redux puro?

Redux Toolkit nació para resolver tres dolores concretos que aparecen al trabajar con Redux tradicional [01:00].

• Demasiado boilerplate para lograr resultados simples.
• Necesidad de instalar paquetes extra como redux-immutable o redux-thunk para tareas comunes.
• Curva de aprendizaje elevada al inicio del proyecto.

La librería integra Immer internamente para manejar la inmutabilidad, así que tú escribes código que parece mutar el estado, pero por detrás se garantiza que sea inmutable. También trae los slices, que agrupan en un solo lugar el nombre, el estado inicial y los reducers sin que tengas que crear action types manualmente.

¿Qué es un slice en Redux Toolkit? Es una porción del estado global que agrupa su nombre, su estado inicial y sus reducers en un solo objeto. Cada slice genera automáticamente sus action creators y types.

¿Cómo crear tu primer slice con createSlice?

El primer paso es instalar el paquete con npm install @reduxjs/toolkit y crear una carpeta slices dentro de src (también suele llamarse features) [02:30].

¿Qué estructura recibe createSlice?

Dentro de la carpeta creas un archivo, por ejemplo dataSlice.js, e importas createSlice desde la librería. La función recibe un objeto con tres propiedades clave:

• name: identificador del slice, en este caso "data".
• initialState: el estado inicial, aquí { pokemons: [] }.
• reducers: un objeto donde cada función es a la vez un reducer y un action creator.

js import { createSlice } from '@reduxjs/toolkit'

const initialState = { pokemons: [] }

export const dataSlice = createSlice({ name: 'data', initialState, reducers: { setPokemons: (state, action) => { state.pokemons = action.payload }, setFavorite: (state, action) => { const currentPokemonIndex = state.pokemons.findIndex( (pokemon) => pokemon.id === action.payload.id ) if (currentPokemonIndex >= 0) { const isFavorite = state.pokemons[currentPokemonIndex].favorite state.pokemons[currentPokemonIndex].favorite = !isFavorite } }, }, })

Fíjate que setPokemons asigna directamente state.pokemons = action.payload. Parece que mutas el estado, pero Immer trabaja por debajo y mantiene la inmutabilidad real [05:20].

¿Cómo nombra Redux Toolkit los action types?

La convención automática es nombreDelSlice/nombreDelReducer. Por ejemplo, setPokemons dentro del slice data genera el type data/setPokemons. Lo verás reflejado en Redux DevTools o en tu middleware de logs.

¿Cómo exportar acciones y reducers de un slice?

Un slice expone dos cosas que necesitas en tu aplicación: los actions generados automáticamente y el reducer combinado [08:10].

js export const { setPokemons, setFavorite } = dataSlice.actions export default dataSlice.reducer

Los actions se desestructuran de dataSlice.actions y se exportan con nombre, mientras que el reducer va como export default. Si haces un console.log(dataSlice) verás que el objeto incluye name, actions, reducer y caseReducers, todo listo para usar.

¿Necesito Immutable.js con Redux Toolkit? No. Toolkit usa Immer internamente, así que puedes escribir asignaciones directas como state.pokemons = action.payload sin romper la inmutabilidad.

¿Cómo integrar el slice en el rootReducer?

En tu archivo rootReducer ya no necesitas redux-immutable. Importa combineReducers directamente desde redux y pásale el reducer que exportaste por defecto desde el slice.

js import { combineReducers } from 'redux' import dataReducer from '../slices/dataSlice'

export default combineReducers({ data: dataReducer, })

Al recargar la aplicación y abrir Redux DevTools verás que el estado global ahora tiene una propiedad data que corresponde a tu slice [11:40]. Si previamente tenías otros reducers como uiReducer, puedes comentarlos mientras los migras también a slices.

¿Qué pasa con el manejo de favoritos sin Immutable?

La lógica del reducer setFavorite se vuelve más legible. En vez de usar get o getIn de Immutable, accedes directamente con notación de punto y corchetes:

• Buscas el índice del Pokémon con findIndex por su id.
• Validas que el índice sea mayor o igual a cero.
• Lees el valor actual de favorite y lo asignas a su negación.

Esa simplicidad es justo el valor que aporta Redux Toolkit: menos código, más claridad y la misma garantía de inmutabilidad.

¿Ya migraste algún proyecto de Redux clásico a Redux Toolkit? Cuéntame en los comentarios qué parte te resultó más sencilla y qué patrón te costó más adaptar.