Redux Toolkit : Simplifier la gestion d’état dans React

Redux est un outil populaire de gestion d’état dans l’écosystème React. Cependant, l’utilisation traditionnelle de Redux est souvent critiquée pour sa complexité et sa verbosité, nécessitant de nombreuses étapes pour créer un store, de multiples fichiers avec du code répétitif et un manque de normes claires pour l’écriture de la logique. Redux Toolkit a été créé pour résoudre ces problèmes. Développé par l’équipe ReduxJS elle-même, Redux Toolkit permet d’écrire du code Redux rapidement, complètement et selon des normes unifiées.

Redux Toolkit ne simplifie pas seulement la création de stores, mais intègre également des middlewares et Redux Devtools pour déboguer et suivre les mises à jour d’état. Cela permet aux développeurs de gagner du temps et des efforts.

La déclaration des types d’actions dans Redux traditionnel est assez verbeuse et cette valeur n’est utilisée que lors de la création d’actions et dans le reducer. Redux Toolkit fournit la fonction createAction pour créer des actions de manière plus concise. Cette fonction prend une chaîne de caractères et renvoie une fonction qui crée une action avec le type correspondant à la chaîne de caractères passée en argument.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

De plus, createAction permet d’accéder facilement au type de l’action, ce qui permet d’économiser encore plus de code :

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkit fournit également la fonction createReducer pour créer des reducers de manière plus simple et intuitive que la méthode traditionnelle. createReducer permet d’initialiser un reducer avec une logique intuitive sous forme d’objet de référence, où chaque clé est un type et chaque valeur est une fonction reducer.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducer prend deux paramètres : la valeur initiale de l’état et l’objet qui permet au reducer d’écouter et de mettre à jour l’état. Grâce aux propriétés calculées d’ES6, nous pouvons réécrire le code ci-dessus de manière plus concise :

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

Grâce à createAction et createReducer, la création de stores dans Redux Toolkit devient beaucoup plus simple et compréhensible qu’avec Redux traditionnel. Le code est organisé de manière claire, lisible et facile à maintenir. Redux Toolkit simplifie la gestion d’état dans les applications React, permettant aux développeurs de se concentrer sur la logique métier plutôt que sur le code boilerplate.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store