0Pricing
TypeScript Academy · Leçon

Typer les slices et thunks de Redux Toolkit

Utilisez createSlice et createAsyncThunk avec une déduction complète des types

Typer les slices et thunks de Redux Toolkit est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Pourquoi typer Redux Toolkit ?

Redux Toolkit (RTK) offre une excellente prise en charge de TypeScript. Un typage correct garantit que les actions, le state et les fonctions thunk asynchrones sont tous sûrs du point de vue des types, sans assertions de types manuelles.

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

Typer l’interface du state

Définissez le state de votre slice comme une interface TypeScript avant de créer la slice.

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

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

createSlice avec un state typé

Transmettez le type du state comme paramètre générique afin de garantir que les réducteurs reçoivent un state correctement typé.

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

Typage de PayloadAction

Utilisez PayloadAction de RTK pour typer action.payload dans les réducteurs.

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

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

createAsyncThunk avec des types

Fournissez les types de la valeur de retour, de l’argument du thunk et de la configuration de l’API du thunk.

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

Gérer les actions thunk dans extraReducers

Utilisez l’API de rappel builder pour gérer de manière entièrement typée les actions thunk en attente, réussies ou rejetées.

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 et AppDispatch typés

Exportez RootState et AppDispatch typés depuis le fichier du store afin de les utiliser dans les sélecteurs et les 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 et useDispatch typés

Créez des versions typées des hooks Redux pour éviter de répéter les assertions de types dans chaque composant.

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

Typage de RTK Query

RTK Query génère des hooks entièrement typés à partir de vos définitions de points de terminaison — aucun typage manuel des réponses n’est nécessaire.

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

Typage des sélecteurs

Écrivez des sélecteurs typés à l’aide de RootState afin de garantir un accès au state sûr du point de vue des types.

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

Récapitulatif : RTK typé

TypeScript avec Redux Toolkit : définissez une interface de state, utilisez PayloadAction dans les réducteurs, typez les paramètres génériques de createAsyncThunk, exportez RootState et AppDispatch, puis créez des enveloppes de hooks typées.

Vérification rapide

Quelle annotation de type rend action.payload sûr du point de vue des types dans un réducteur RTK ?

Ce que vous avez appris

TypeScript avec Redux Toolkit : définissez les interfaces du state des slices, utilisez PayloadAction dans les réducteurs, typez createAsyncThunk avec trois paramètres génériques et exportez RootState/AppDispatch typés avec des enveloppes de hooks destinées aux composants.

Questions Fréquemment Posées

La leçon « Typer les slices et thunks de Redux Toolkit » est-elle gratuite ?

Oui — le texte complet de « Typer les slices et thunks de Redux Toolkit » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Typer les slices et thunks de Redux Toolkit » ?

Utilisez createSlice et createAsyncThunk avec une déduction complète des types Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Typer les slices et thunks de Redux Toolkit » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Typer les slices et thunks de Redux Toolkit
  2. Motifs de typage des magasins Zustand
  3. XState : machines à états typées
  4. État dérivé et sélecteurs avec des types
← Retour à TypeScript Academy