Comment Redux a changé et pourquoi il est toujours ajouté aux nouveaux projets

Vous souvenez-vous de l'époque où un simple compteur Redux nécessitait la création de trois fichiers séparés, la déclaration d'une douzaine de constantes et l'écriture d'un énorme switch-case dans le reducer ? Pour cette raison, des milliers de développeurs en sont venus à détester la bibliothèque. Mais Redux n'est plus ce qu'il était en 2015.

Les développeurs ont reconnu le problème à temps et ont publié Redux Toolkit (RTK). Aujourd'hui, il est devenu la norme pour travailler avec la bibliothèque et a éliminé presque tout ce dont Redux était précédemment critiqué.

Pourquoi auriez-vous besoin d'un gestionnaire d'état global

Dans les petites applications React, vous pouvez facilement vous en sortir avec la transmission classique de props ou le Context React intégré. Les problèmes commencent lorsque le projet grandit. Quand les données d'un formulaire doivent simultanément mettre à jour une barre latérale, l'en-tête du site et envoyer des analytiques, la chaîne de props devient un chaos.

Redux conserve l'état de l'application dans un seul objet (store). Vous ne modifiez pas cet objet directement. Au lieu de cela, vous dispatchez une action, et des fonctions pures, les reducers, calculent le nouvel état basé sur l'ancien.

Cette approche offre une prévisibilité claire. Si quelque chose se casse dans l'application, à travers Redux DevTools, vous pouvez voir l'historique complet des changements d'état et rembobiner le temps, suivant les actions des utilisateurs étape par étape.

Comment Redux Toolkit a facilité la vie

Auparavant, pour mettre à jour un seul champ, vous deviez suivre manuellement l'immuabilité de l'objet, créant des spreads fastidieux.

Redux Toolkit a Immer intégré. Maintenant, le code à l'intérieur des reducers est écrit comme si vous mutiez l'état directement, et la bibliothèque convertit automatiquement cela en une mise à jour immuable sécurisée.

Regardons un exemple de compteur basique :

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    incremented: state => {
      // Immer улавливает "мутацию" и создает новое состояние
      state.value += 1
    },
    decremented: state => {
      state.value -= 1
    }
  }
})

export const { incremented, decremented } = counterSlice.actions

const store = configureStore({
  reducer: counterSlice.reducer
})

store.subscribe(() => console.log(store.getState()))

store.dispatch(incremented()) // { value: 1 }
store.dispatch(incremented()) // { value: 2 }
store.dispatch(decremented()) // { value: 1 }

Pas de fichiers séparés avec les types d'actions. La fonction createSlice a créé à la fois le reducer et les générateurs d'actions pour vous.

Quand Redux est nécessaire et quand il vaut mieux s'en passer

Le créateur de la bibliothèque, Dan Abramov, a écrit « You Might Not Need Redux » il y a des années. Ce conseil est toujours pertinent aujourd'hui.

Redux est utile dans des situations spécifiques :

• Il y a beaucoup de données qui changent activement avec le temps et qui sont utilisées dans différentes parties de l'application.
• La logique de mise à jour de l'état est complexe ou nécessite un séquençage strict.
• Un débogage pratique avec un historique transparent de tous les événements est nécessaire.
• Beaucoup de personnes travaillent dans l'équipe, et un modèle unique et clair de manipulation des données est nécessaire.

Si vous avez une application simple où les données doivent simplement être transmises sur quelques niveaux, intégrer Redux ici n'en vaut pas la peine. Les abstractions supplémentaires ne feront que compliquer le code.

Démarrage rapide

La façon la plus simple de créer un projet est avec Vite et un modèle prêt à l'emploi de Redux Toolkit et TypeScript :

npx degit reduxjs/redux-templates/packages/vite-template-redux my-app

Pour Next.js, il y a un modèle prêt à l'emploi de Vercel :

npx create-next-app --example with-redux my-app

Si vous ajoutez la bibliothèque à un projet existant, il suffit d'installer deux paquets :

npm install @reduxjs/toolkit react-redux

En conclusion

Le cœur de Redux pèse environ 2 Ko. La bibliothèque a depuis longtemps dépassé l'ère du code répétitif sans fin. Associé à Redux Toolkit, vous obtenez un outil strict et prévisible pour la gestion d'état qui fonctionne très bien dans les grands projets.