0Pricing
Frontend Academy · Lección

Redux Toolkit: createSlice y configureStore

Defina fragmentos de estado con createSlice, combínelos en configureStore y envíe acciones desde componentes de React mediante useDispatch y useSelector.

Redux Toolkit: createSlice y configureStore es una lección gratuita de Frontend 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 Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué Redux Toolkit?

Redux Toolkit (RTK) es la forma oficial y recomendada de escribir lógica de Redux. Elimina el código repetitivo de Redux tradicional: no se necesitan cadenas manuales de tipos de acciones, reducers verbosos ni una configuración compleja del store.

Instalar Redux Toolkit

Instale RTK y la integración con React.

npm install @reduxjs/toolkit react-redux

createSlice — Estado + Reducer + Acciones

createSlice crea una parte del estado junto con su reducer y sus creadores de acciones en una sola llamada. Internamente, usa Immer para realizar actualizaciones inmutables.

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

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

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

configureStore — Ensamblar el store

configureStore crea el store de Redux con valores predeterminados adecuados: Redux DevTools está habilitado y el middleware thunk está incluido.

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

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

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Proporcionar el store

Envuelva la aplicación con <Provider store={store}> de react-redux.

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

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

useSelector — Leer el estado

useSelector(selector) lee datos del store. Vuelve a renderizar el componente cuando cambia la parte seleccionada.

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch — Enviar acciones

useDispatch() devuelve la función dispatch del store. Llámela con un creador de acciones para activar un cambio de estado.

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk — Acciones asíncronas

createAsyncThunk de RTK gestiona operaciones asíncronas (llamadas a API) y envía automáticamente las acciones pending/fulfilled/rejected.

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

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query — Obtención de datos integrada

RTK Query (parte de RTK) proporciona obtención, almacenamiento en caché e invalidación automáticos de datos. Defina los endpoints de la API y obtenga hooks generados.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

Immer en los reducers

RTK usa Immer internamente, por lo que los reducers de los slices pueden modificar el estado directamente. Immer detecta las mutaciones y produce un nuevo objeto de estado inmutable: obtiene la comodidad de la mutación con la seguridad de la inmutabilidad.

Redux DevTools

La extensión de navegador Redux DevTools permite inspeccionar cada acción enviada y el estado resultante, e incluso viajar en el tiempo: puede saltar a cualquier estado anterior. Es una herramienta invaluable para depurar flujos de estado complejos.

Comprobación rápida

¿Qué genera automáticamente createSlice en Redux Toolkit?

Resumen: Redux Toolkit

createSlice combina reducer y acciones en una sola definición. Immer permite «modificar» el estado de forma segura. configureStore ensambla los reducers con DevTools y thunk. useSelector lee el estado. useDispatch envía acciones. createAsyncThunk se usa para flujos asíncronos. RTK Query se usa para obtener datos con almacenamiento en caché.

Preguntas frecuentes

¿La lección «Redux Toolkit: createSlice y configureStore» es gratis?

Sí — el texto completo de «Redux Toolkit: createSlice y configureStore» 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 Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Redux Toolkit: createSlice y configureStore»?

Defina fragmentos de estado con createSlice, combínelos en configureStore y envíe acciones desde componentes de React mediante useDispatch y useSelector. Practicas Frontend 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 Frontend Academy?

No se requiere experiencia previa. Frontend 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 «Redux Toolkit: createSlice y configureStore»?

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 Frontend Academy?

Sí. Cada lección de Frontend 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

  1. Redux Toolkit: createSlice y configureStore
  2. Zustand para el estado ligero de React
  3. Pinia para Vue: defineStore y storeToRefs
  4. Cuándo usar estado global o local
← Volver a Frontend Academy