React Academy · Lección

Slices de Redux Toolkit y createSlice

Cree la lógica de los reducers con createSlice, defina acciones y conéctela al store de Redux.

Slices de Redux Toolkit y createSlice es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Introducción

En esta lección creará slices de Redux Toolkit con createSlice, definirá las acciones y los reducers en un mismo lugar y los conectará a un store de Redux.

¿Qué es Redux Toolkit?

Redux Toolkit (RTK) es la forma oficial y basada en convenciones de escribir Redux. Elimina el código repetitivo al combinar reducers, creadores de acciones y el estado inicial en una sola llamada a createSlice().

Instalación

Instale Redux Toolkit y react-redux.

npm install @reduxjs/toolkit react-redux

createSlice

Llame a createSlice() con un name, initialState y un objeto reducers. RTK genera automáticamente los creadores de acciones y los tipos de acción.

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1; },
    decrement: state => { state.value -= 1; },
    incrementBy: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

Immer entre bastidores

RTK usa Immer internamente, por lo que puede escribir de forma segura lógica de reducer que modifica el estado (`state.value += 1`). Immer la convierte en una actualización inmutable entre bastidores.

Configuración del store

Cree el store de Redux con configureStore() y añada sus slices como reducers.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

Proporcionar el store

Envuelva su aplicación en un Provider de react-redux y pásеле el store.

import { Provider } from 'react-redux';
import { store } from './store';

createRoot(document.getElementById('root')).render(
  <Provider store={store}><App /></Provider>
);

useSelector y useDispatch

Lea el estado con useSelector y envíe acciones con useDispatch. Use versiones tipadas para TypeScript.

import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <>
      <p>{value}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </>
  );
}

Tipos de TypeScript

Exporte los tipos RootState y AppDispatch desde store.ts para disponer de hooks totalmente tipados.

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);

Reducers adicionales

El campo extraReducers gestiona acciones de otros slices o de createAsyncThunk. Use el patrón de callback de builder para añadir casos.

extraReducers: (builder) => {
  builder.addCase(fetchUser.fulfilled, (state, action) => {
    state.user = action.payload;
  });
}

Comprobación rápida

¿Por qué puede escribir código que modifica el estado, como `state.value += 1`, dentro de un reducer de Redux Toolkit?

Resumen

createSlice combina name, initialState y reducers en un solo objeto. Immer permite escribir código de reducer con estilo mutable. configureStore ensambla los slices. useSelector lee el estado; useDispatch envía acciones.

A continuación

Siguiente lección: **Lógica asíncrona con createAsyncThunk** — gestionará llamadas a API en Redux con tipos de acciones del ciclo de vida.

Preguntas frecuentes

¿La lección «Slices de Redux Toolkit y createSlice» es gratis?

Sí — el texto completo de «Slices de Redux Toolkit y createSlice» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Slices de Redux Toolkit y createSlice»?

Cree la lógica de los reducers con createSlice, defina acciones y conéctela al store de Redux. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Slices de Redux Toolkit y createSlice»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Slices de Redux Toolkit y createSlice
Lógica asíncrona con createAsyncThunk
RTK Query: endpoints y almacenamiento automático en caché
Actualizaciones optimistas e invalidación de caché

← Volver a React Academy