Logo

Les Slices dans Redux : Une Gestion d'État Simplifiée

Introduction

Lors de la gestion de l'état d'une application, il est souvent nécessaire de regrouper certaines données et leurs mises à jour en un seul endroit. Redux Toolkit, une librairie qui simplifie l'utilisation de Redux, propose une solution structurée à ce besoin avec le concept de slices. Les slices organisent l'état et les fonctions qui le modifient de manière claire et logique.

1. Qu'est-ce qu'une Slice ?

Une slice représente une partie de l'état d'une application, qui inclut :

  • Un nom unique pour identifier cette partie de l'état
  • Un état initial
  • Des fonctions (reducers) pour modifier cet état
  • Des actions générées automatiquement pour interagir avec cette slice

Prenons un exemple : si une application gère des utilisateurs, elle pourrait stocker les informations suivantes.

  • Le nom de l'utilisateur
  • Son statut de connexion
  • Une action pour se connecter
  • Une action pour se déconnecter

Tout cela peut être regroupé dans une slice.

2. Créer une Slice

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

const userSlice = createSlice({
  name: 'user',
  initialState: {
    username: null,
    isAuthenticated: false
  },
  reducers: {
    login: (state, action) => {
      state.username = action.payload;
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.username = null;
      state.isAuthenticated = false;
    }
  }
});

Grâce à createSlice, Redux Toolkit génère automatiquement des actions basées sur les reducers définis.

3. Utiliser les Actions Générées

L'un des avantages majeurs des slices est la génération automatique des actions. Grâce à la structure que vous définissez dans `createSlice`, Redux Toolkit crée pour vous les fonctions permettant de déclencher les modifications d'état. Ces actions sont directement liées à la slice, ce qui simplifie leur utilisation et réduit les risques d'erreurs.

// Récupération des actions générées pour la slice 'user'
export const { login, logout } = userSlice.actions;

// Utilisation de l'action 'login' pour modifier l'état de la slice 'user'
dispatch(login('Alice'));

Dans cet exemple, `login('Alice')` enverra une action spécifique pour modifier la partie de l'état gérée par `userSlice`. Le lien entre l'action et la slice est implicite.

4. Modification de l'État et Immer

La modification de l'état dans Redux nécessite de respecter l'immuabilité. Avec Redux classique, cela implique de créer de nouveaux objets. Redux Toolkit, grâce à Immer, simplifie cette tâche, et cette simplification est particulièrement visible au sein des slices.

// Avec Redux classique (complexité de l'immuabilité)
function login(state, action) {
  return { ...state, username: action.payload, isAuthenticated: true };
}

// Avec Redux Toolkit et une slice (mutation apparente grâce à Immer)
login: (state, action) => {
  state.username = action.payload;
  state.isAuthenticated = true;
}

Immer permet d'écrire le code de modification de l'état de manière intuitive, comme si vous le modifiiez directement. Redux Toolkit configure Immer pour qu'il fonctionne automatiquement à l'intérieur des reducers définis dans votre slice. Ainsi, vous bénéficiez de la simplicité d'écriture sans avoir à vous soucier des détails de l'immuabilité pour chaque modification d'état au sein de cette slice.

Conclusion

Les slices de Redux Toolkit simplifient la gestion de l'état en regroupant clairement les données, les actions et les modifications au même endroit. Cette approche réduit la complexité du code et améliore la compréhension de la gestion d'état.

Logo