0Pricing
Frontend Academy · Leçon

Redux Toolkit : createSlice et configureStore

Définissez des tranches d’état avec createSlice, regroupez-les dans configureStore et envoyez des actions depuis les composants React avec useDispatch et useSelector.

Redux Toolkit : createSlice et configureStore est une leçon Frontend 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi Redux Toolkit ?

Redux Toolkit (RTK) est la manière officielle et prescriptive d'écrire la logique Redux. Il élimine le code répétitif de Redux classique : plus besoin de chaînes manuelles pour les types d'action, de réducteurs verbeux ni de configuration complexe du store.

Installer Redux Toolkit

Installez RTK et la liaison React.

npm install @reduxjs/toolkit react-redux

createSlice — État + réducteur + actions

createSlice crée une portion d'état avec son réducteur et ses créateurs d'actions en un seul appel. En interne, il utilise Immer pour effectuer des mises à jour immuables.

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 — Assembler le store

configureStore crée le store Redux avec des valeurs par défaut adaptées : Redux DevTools est activé et l'intergiciel thunk est inclus.

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;

Fournir le store

Entourez votre app de <Provider store={store}> provenant de react-redux.

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

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

useSelector — Lire l'état

useSelector(selector) lit les données du store. Il relance le rendu du composant lorsque la portion sélectionnée change.

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 — Distribuer des actions

useDispatch() retourne la fonction dispatch du store. Appelez-la avec un créateur d'actions pour déclencher une modification de l'état.

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 — Actions asynchrones

Le createAsyncThunk de RTK gère les opérations asynchrones (appels d'API) et distribue automatiquement les actions d'attente, de réussite et d'échec.

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 — Récupération intégrée des données

RTK Query (qui fait partie de RTK) fournit automatiquement la récupération, la mise en cache et l'invalidation des données. Définissez les points d'accès de l'API et obtenez des hooks générés.

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 dans les réducteurs

RTK utilise Immer en interne, ce qui permet aux réducteurs de portions de modifier directement l'état. Immer détecte les mutations et produit un nouvel objet d'état immuable : vous bénéficiez de la simplicité d'une mutation tout en conservant la sécurité de l'immuabilité.

Redux DevTools

L'extension de navigateur Redux DevTools vous permet d'inspecter chaque action distribuée, l'état qui en résulte et même de voyager dans le temps : revenez à n'importe quel état précédent. Elle est indispensable pour déboguer les flux d'état complexes.

Vérification rapide

Que génère automatiquement createSlice dans Redux Toolkit ?

Récapitulatif : Redux Toolkit

createSlice regroupe le réducteur et les actions dans une seule définition. Immer permet de « modifier » l'état en toute sécurité. configureStore assemble les réducteurs avec DevTools et thunk. useSelector lit l'état. useDispatch distribue les actions. createAsyncThunk gère les flux asynchrones. RTK Query assure la récupération complète des données avec mise en cache.

Questions Fréquemment Posées

La leçon « Redux Toolkit : createSlice et configureStore » est-elle gratuite ?

Oui — le texte complet de « Redux Toolkit : createSlice et configureStore » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Redux Toolkit : createSlice et configureStore » ?

Définissez des tranches d’état avec createSlice, regroupez-les dans configureStore et envoyez des actions depuis les composants React avec useDispatch et useSelector. Tu pratiques Frontend 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 Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend 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 « Redux Toolkit : createSlice et configureStore » ?

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

Oui. Chaque leçon Frontend 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. Redux Toolkit : createSlice et configureStore
  2. Zustand pour un état React léger
  3. Pinia pour Vue : defineStore et storeToRefs
  4. Quand utiliser un état global ou local
← Retour à Frontend Academy