Crea tu primer slice con Redux Toolkit

Contenido del curso

No sé dónde empezar

Conceptos claves para empezar

Introducción a nuestro proyecto

¡Atraparlos ya!

7
Integrar PokeAPI con Axios en React
10:18 min

React.js + Redux

Middlewares

Avanzando la ui

Inmutabilidad

Avanzado

Despedida del curso

22
Reto final: filtro de Pokémon con Redux
02:13 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:21

Crea tu primer slice con Redux Toolkit

Curso Profesional de React.js y Redux

Clase 20 de 22

Clase 20 / 22

Recursos

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.

Harold Zurita Simon

Hace un año

⚙️ Mejorando Redux con Redux Toolkit (RTK)

Hasta ahora aprendimos que para manejar nuestros pedacitos de estado en Redux necesitamos:

🏷️ Action Types
🛠️ Action Creators
🔧 Reducers
⚡ Middleware como redux-thunk
🔩 Extras como combineReducers, ImmutableJS, etc.

El problema es que Redux clásico genera demasiado boilerplate, tiene una curva de aprendizaje más elevada, y muchas veces necesitamos instalar múltiples paquetes para poder trabajar correctamente.

🚀 ¿Por qué Redux Toolkit?

Redux Toolkit (RTK) nace para mejorar la experiencia del desarrollador.

Sus ventajas principales:

✂️ Reduce drasticamente el boilerplate.
🧊 Usa ImmerJS internamente para garantizar inmutabilidad (ya no lo manejamos nosotros).
🧱 Introduce slices: una forma moderna de agrupar reducer + actions en un mismo lugar.
⚡ Facilita configurar el store.
🧨 Nos abstrae de manejar action types manualmente.

Es decir, Redux Toolkit hace el trabajo pesado por nosotros 💪.

📦 Instalación

npm i @reduxjs/toolkit

🍰 Creando un Slice

Creamos una carpeta slices/ y dentro un archivo dataSlice.js.

Con RTK usamos createSlice, que recibe:

name: nombre del slice
initialState: estado inicial
reducers: un objeto donde cada propiedad es un reducer + action creator al mismo tiempo

👉 Ya no usamos switch/case.

👉 Ya no importamos action types, RTK los genera automáticamente siguiendo el patrón:

/<nombre_del_reducer>, por ejemplo:

data/setPokemons.

Además, gracias a ImmerJS, podemos mutar el state directamente sin romper la inmutabilidad. RTK se encarga de todo.

🧠 Nuestro dataSlice.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.pokemonId
      );

      if (currentPokemonIndex >= 0) {
        const isFavorite = state.pokemons[currentPokemonIndex].favorite;
        state.pokemons[currentPokemonIndex].favorite = !isFavorite;
      }
    },
  },
});

export const { setFavorite, setPokemons } = dataSlice.actions;
console.log("DataSlice", dataSlice);

export default dataSlice.reducer;

📝 Notas importantes

💡 Ya no retornamos state, Immer se encarga de producir un nuevo estado inmutable.
🎯 Reducers y action creators viven juntos.
⚡ setPokemons asigna directamente.
🧩 setFavorite accede y modifica sin get ni setIn.

🧱 Root Reducer con Redux Toolkit

Ya no necesitamos redux-immutable ni estructuras especiales.

Volvemos al combineReducers tradicional de Redux.

import { combineReducers } from "redux";
import dataReducer from "../slices/dataSlice";

const rootReducer = combineReducers({
  data: dataReducer,
});

export default rootReducer;

Comentarios (20)20 comentarios

Alex Leonardo Rodriguez Carvajal

Hace 4 años

Engel Reyes

Jhon Eduard Bocanegra Ortiz

Juan Camilo Lentino Villalba

Sylvester Josué Rojas Cañón

Seba Cardoso

Estiven Mahecha Henao

German Cavani

Miguel Angel Reyes Moreno

Geovanny Sneyder Paez Pabon

Moises Hernandez

N40 M10

Hace 3 años

Cayo Legal

Wladimir Rocha

LUIS PALACIOS

Mariangelica Useche

Team Platzi

Sebastian Carballo

Víctor Samuel Mosquera Artamonov

Andrés Felipe Eslava Zuluaga

Max Andy Diaz Neyra

Conceptos claves para empezar

Curso profesional de React JS y Redux

Principios de Redux que todo dev debe saber

Ciclo de vida de datos en Redux

Redux vs Context API en React

Introducción a nuestro proyecto

Qué es la app Pokedux con Redux

Maqueta una Pokédex con React y Ant Design

¡Atraparlos ya!

Integrar PokeAPI con Axios en React

React.js + Redux

Integrando Redux con connect en React

useSelector y useDispatch vs connect en Redux

Redux DevTools para depurar tu store

Middlewares

Creando middlewares personalizados no Redux

Sprites reales con Promise.all en PokeAPI

Redux Thunk para acciones asíncronas

Redux Thunk vs Redux Saga

Avanzando la ui

Loader con Redux y Ant Design Spin

Cómo guardar Pokémon favoritos con Redux

Inmutabilidad

Inmutabilidad en Redux con spread operator

Immutable.js en reducers de Redux

Avanzado

combineReducers para separar data y UI en Redux

Crea tu primer slice con Redux Toolkit

createAsyncThunk para peticiones asíncronas

Despedida del curso

Reto final: filtro de Pokémon con Redux

Crea tu primer slice con Redux Toolkit