TypeScript Academy · Lección

Tipado de slices y thunks de Redux Toolkit

Utilice createSlice y createAsyncThunk con inferencia de tipos completa.

Lección 1 de 413 pasos

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

¿Por qué tipar Redux Toolkit?

Redux Toolkit (RTK) incluye una excelente compatibilidad con TypeScript. Un tipado adecuado garantiza que las acciones, el estado y los thunks asíncronos sean seguros para los tipos sin aserciones de tipos manuales.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

Tipar la interfaz de estado

Defina el estado de su slice como una interfaz de TypeScript antes de crear el slice.

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};

createSlice con estado tipado

Indique el tipo del estado como genérico para garantizar que los reducers reciban un estado correctamente tipado.

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoading(state, action: PayloadAction<boolean>) {
      state.loading = action.payload; // state: UserState — typed
    },
  },
});

Tipado de PayloadAction

Use PayloadAction de RTK para tipar action.payload en los reducers.

import { PayloadAction } from "@reduxjs/toolkit";

reducers: {
  addUser(state, action: PayloadAction<User>) {
    state.users.push(action.payload); // action.payload: User
  },
}

createAsyncThunk con tipos

Proporcione los tipos del valor de retorno, del argumento del thunk y de la configuración de la API del thunk.

const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
  "users/fetchAll",
  async (_, { rejectWithValue }) => {
    try {
      return await api.getUsers();
    } catch (e) {
      return rejectWithValue("Failed to fetch");
    }
  }
);

Gestionar acciones de thunk en extraReducers

Use la API de callbacks de builder para gestionar con un tipado completo las acciones de thunk pendientes, cumplidas o rechazadas.

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload; // action.payload: User[]
        state.loading = false;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.error = action.payload ?? "Unknown error";
      });
  },
});

RootState y AppDispatch tipados

Exporte RootState y AppDispatch tipados desde el archivo del store para usarlos en selectores y hooks.

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ reducer: { users: userSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

useSelector y useDispatch tipados

Cree versiones tipadas de los hooks de Redux para evitar repetir aserciones de tipos en cada componente.

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Tipado de RTK Query

RTK Query genera hooks completamente tipados a partir de las definiciones de sus endpoints, sin necesidad de tipar manualmente las respuestas.

const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `/users/${id}`,
    }),
  }),
});
export const { useGetUserQuery } = api;

Tipado de selectores

Escriba selectores tipados usando RootState para garantizar un acceso al estado seguro para los tipos.

const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;

Recapitulación: RTK tipado

TypeScript con Redux Toolkit: defina una interfaz de estado, use PayloadAction en los reducers, tipifique los genéricos de createAsyncThunk, exporte RootState y AppDispatch, y cree wrappers tipados para los hooks.

Comprobación rápida

¿Qué anotación de tipo hace que action.payload sea seguro para los tipos en un reducer de RTK?

Lo que ha aprendido

TypeScript con Redux Toolkit: defina interfaces para el estado de los slices, use PayloadAction en los reducers, tipifique createAsyncThunk con tres genéricos y exporte RootState/AppDispatch tipados junto con wrappers de hooks para usarlos en los componentes.

Gratis para empezar

Aprende TypeScript con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos
101
Lecciones
352

Preguntas frecuentes

¿La lección «Tipado de slices y thunks de Redux Toolkit» es gratis?

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

¿Qué aprenderé en «Tipado de slices y thunks de Redux Toolkit»?

Utilice createSlice y createAsyncThunk con inferencia de tipos completa. Practicas TypeScript 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 TypeScript Academy?

No se requiere experiencia previa. TypeScript 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 «Tipado de slices y thunks de Redux Toolkit»?

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

Sí. Cada lección de TypeScript 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. Tipado de slices y thunks de Redux Toolkit
  2. Patrones de tipado de stores de Zustand
  3. XState: máquinas de estados tipadas
  4. Estado derivado y selectores con tipos
← Volver a TypeScript Academy