Redux Toolkit

Redux Toolkit (RTK) est la boîte à outils officielle et recommandée pour écrire la logique Redux de manière efficace et moderne. C’est une couche d’abstraction qui enveloppe le noyau de Redux pour simplifier considérablement son utilisation.

Objectif : RTK a été créé pour résoudre trois problèmes majeurs de Redux « vanilla » :

• La configuration du store est trop complexe.
• Il faut ajouter beaucoup de packages pour obtenir des fonctionnalités utiles.
• Redux nécessite trop de code répétitif et standardisé (ce qu’on appelle le boilerplate code).

La notion clé : les Slices

C’est le cœur de la simplification apportée par RTK. Un slice est un regroupement logique qui contient, pour une partie spécifique de l’état global :

• Son nom (name)
• Son état initial (initialState)
• Ses réducteurs (reducers)

La magie de createSlice : en fournissant ces trois éléments, cette fonction génère automatiquement :

Le réducteur (la fonction qui met à jour l’état).

Les action creators (les fonctions qui créent les actions).

Cela élimine le besoin d’écrire manuellement des actions types, des action creators et des switch/case dans les reducers.

Exemple concret :

javascript

import { createSlice, configureStore } from '@reduxjs/toolkit'

// Création du slice
const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    incremented: state => {
      // RTK utilise Immer pour permettre l'écriture "mutative"...
      state.value += 1 // ... mais l'état reste immuable sous le capot !
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

// Les action creators sont générés automatiquement
export const { incremented, decremented } = counterSlice.actions

// Le réducteur est aussi généré automatiquement
const store = configureStore({
  reducer: counterSlice.reducer
})

Les autres outils clés de RTK

RTK ne se limite pas aux slices. Il fournit une suite d’outils pour couvrir la plupart des besoins du développement Redux :

Outil Rôle

Voici une définition améliorée et enrichie du Reducer dans Redux, prête à être intégrée dans votre lexique.

---

Reducer (Réducteur)

Définition : Un reducer est une fonction pure qui détermine comment l’état de l’application évolue en réponse à une action . C’est le cerveau de la logique de mise à jour : il prend l’ancien état et l’action reçue, calcule le prochain état et le retourne .

Signature de la fonction :

(étatPrécédent, action) => nouvelÉtat

Principe clé : Contrairement à ce que son nom pourrait suggérer, le reducer ne « réduit » pas l’état au sens propre. Il « accumule » les changements : il reçoit un état initial et une liste d’actions, et les combine progressivement pour produire l’état final . C’est l’analogue de la méthode Array.reduce() qui accumule des valeurs au fil du temps .

---

Les Règles d’Or d’un Reducer (Les 3 Piliers de la Pureté)

Un reducer doit respecter des règles strictes, héritées des principes de Redux . Elles garantissent la prévisibilité et la maintenabilité de l’application :

Règle	Explication	Exemple
1. Pureté	Le reducer ne doit jamais modifier l’état existant. Il doit produire un nouvel objet d’état pour chaque mise à jour .	Mauvaise pratique : state.valeur = 5 (mutation). Bonne pratique : { ...state, valeur: 5 } (copie).
2. Pas d’effets de bord	Il ne doit pas effectuer d’appels API, de manipulations du DOM, ou d’opérations asynchrones. Il doit être synchrone et prédictible .	Un reducer ne fait jamais de fetch().
3. Déterminisme	Étant donné les mêmes arguments (état et action), le reducer doit toujours retourner exactement le même résultat. Ni le temps, ni l’ordre d’appel ne doivent influencer le résultat .	(state, action) => newState est une fonction mathématique pure.

---

Comment ça fonctionne concrètement ?

1. Définition du state initial : Le reducer définit une valeur par défaut pour l’état (généralement via un paramètre state = initialState).
2. Écoute des actions : Le reducer examine la propriété type de l’action reçue, généralement via une structure switch .
3. Mise à jour immuable : Pour chaque type d’action, il calcule et retourne un nouvel objet d’état. Si l’action ne correspond à aucun cas, il retourne l’état précédent inchangé .

Exemple :

const initialState = { value: 0, user: null };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      // Crée un nouvel objet avec value + 1 (copie immuable)
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'LOGIN':
      return { ...state, user: action.payload };
    default:
      // Toujours retourner l'état inchangé pour une action inconnue
      return state;
  }
}

---

Pourquoi le reducer est-il une fonction pure ?

La pureté des reducers est ce qui rend Redux si puissant :

• Prévisibilité : Les changements d’état sont cohérents et faciles à anticiper.
• Débogage amélioré : Des outils comme Redux DevTools permettent d’annuler des actions (time-travel) ou de rejouer des séquences d’actions .
• Testabilité : Un reducer pur est trivial à tester : on lui donne un état et une action, on vérifie le nouvel état retourné .
• Sérialisation : L’état peut être sérialisé et rejoué plus tard, ce qui est utile pour le rendu serveur ou la persistance.

---

Tableau récapitulatif pour votre lexique

Concept	Définition	Rôle
Reducer	Fonction pure qui calcule le prochain état à partir de l’état précédent et d’une action.	C’est le cœur de la logique de mise à jour de Redux.
État précédent	L’état actuel de l’application avant le traitement de l’action.	Point de départ du calcul.
Action	L’objet décrivant ce qui s’est passé (avec un type et un payload).	Le déclencheur de la mise à jour.
Nouvel état	Le résultat du calcul, retourné de manière immuable.	Le nouvel état global de l’application.
Switch	Structure de contrôle souvent utilisée pour traiter différents types d’actions.	Permet de router l’action vers la bonne logique de mise à jour.

Pourquoi utiliser RTK ?

Moins de code boilerplate : vous écrivez uniquement la logique métier, RTK s’occupe du reste.

Simplification des mises à jour immuables : grâce à la bibliothèque Immer, vous pouvez écrire un code qui ressemble à des mutations, tandis que RTK génère des mises à jour immuables sous le capot.

Meilleures pratiques intégrées : RTK intègre les configurations et middlewares recommandés (comme Redux Thunk et Reselect) par défaut.

Réduction des erreurs : il capture automatiquement certaines erreurs courantes (comme les mutations accidentelles de l’état).

En résumé, si vous utilisez Redux, RTK est la voie moderne et standardisée qui rend le code plus propre, plus concis et plus maintenable.