Utilisez le state manager Redux pour gérer l’état de vos applications

Le code Redux est très explicite. C’est à la fois un avantage puisque le code est facile à comprendre, et un inconvénient puisqu’il faut écrire beaucoup de code pour chaque nouvelle fonctionnalité.

Il existe de nombreux projets qui permettent de réduire un peu la quantité de code à écrire dans Redux (on parle souvent de réduire la quantité de “boilerplate”). On trouve un grand nombre de ces projets référencés dans la documentation de Redux ici, mais il existe un projet un peu différent des autres : Redux-Toolkit.

Redux-Toolkit a une particularité : il est développé par les mêmes personnes qui développent Redux et React-Redux. C’est donc l'outil officiel pour optimiser le code Redux !

Installez Redux Toolkit

Pour installer Redux-Toolkit, on utilise Yarn ou NPM :

yarn add @reduxjs/toolkit

Redux Toolkit expose plusieurs fonctions qui permettent de simplifier les différentes parties de Redux. Voici les fonctionnalité que nous allons utiliser dans ce chapitre :

• configureStore  pour simplifier la création du store ;

• createAction  pour créer des actions plus facilement ;

• createReducer  pour faciliter la création des reducers et l’utilisation d’Immer.

Utilisez   configureStore  pour initialiser Redux

La fonction configureStore  permet de créer le store Redux plus simplement. Cette fonction attend un objet en paramètre avec une propriété reducer  qui utilise automatiquement combineReducer  ! De plus, la fonction configureStore  se connecte automatiquement aux Devtools.

Voici à quoi ressemble le fichier store.js  avec Redux-Toolkit :

import themeReducer from '../features/theme'
import freelancesReducer from '../features/freelances'
import freelanceReducer from '../features/freelance'
import { configureStore } from '@reduxjs/toolkit'
 
export default configureStore({
    reducer: {
        theme: themeReducer,
        freelances: freelancesReducer,
        freelance: freelanceReducer,
    },
})

Simplifiez vos actions avec createAction

La fonction createAction  permet de générer un action creator. Cela va donc nous éviter de créer l’action creator nous-mêmes. De plus, nous n'aurons plus besoin de manipuler le nom de l’action directement.

La fonction createAction  attend le type de l’action en paramètre :

import { createAction } from '@reduxjs/toolkit'
 
export const toggleTheme = createAction('theme/toggle');

La valeur de retour de cette fonction est un action creator que l’on peut exécuter pour créer une action :

dispatch(toggleTheme())

Pour accéder au nom de l’action (dans le reducer, par exemple), on peut utiliser la méthode toString()  :

export default function reducer(state = 'light', action) {
    if (action.type === toggleTheme.toString()) {
        return state === 'light' ? 'dark' : 'light'
    }
    if (action.type === SET_THEME) {
        return action.payload
    }
    return state
}

Si l’on passe un paramètre à l'action creator (  toggleTheme  dans l'exemple ci-dessus), ce dernier est automatiquement envoyé dans le payload  :

export const setTheme = createAction('theme/set');
 
setTheme('light')
// { type: 'theme/set', payload: 'light' }

Il est également possible de contrôler comment les paramètres sont passés au  payload   en passant une fonction en second paramètre de  createAction  :

const freelanceResolved = createAction(
    'freelance/resolved',
    (freelanceId, data) => ({
        payload: { freelanceId, data },
    })
)
 
store.dispatch(freelanceResolved(freelanceId, data))

Maintenant que Redux-Toolkit est installé, voyons tout ce qu'il va nous apporter :

 Vous pouvez retrouver le code de cette vidéo sur la branche P4C1S3-redux-toolkit du repository à cette adresse.

Construisez vos reducers avec createReducer

La fonction createReducer  de Redux-Toolkit permet de créer des reducers plus simplement. Elle permet notamment d’utiliser Immer automatiquement !

Il existe deux notations de  createReducer  :

• avec un “Builder Callback” ;

• avec une syntaxe d’objet.

Nous allons uniquement voir la méthode utilisant le “Builder Callback”, car c’est la méthode recommandée, et qu’elle permet plus de flexibilité.

L’utilisation de la fonction createReducer  est un peu particulière et pas évidente à expliquer à l'écrit. Je vous invite donc à me rejoindre dans la vidéo ci-dessous pour découvrir createReducer  .

 A présent, intéressons-nous à un  createReducer  un peu plus complexe qui utilise Immer :

Vous pouvez retrouver le code de cette vidéo sur la branche P4C1S4-create-reducer du repository à cette adresse.

Voici à quoi ressemble le reducer du thème avec createReducer  :

import { createReducer } from '@reduxjs/toolkit'
 
export default createReducer('light', (builder) =>
    builder
    .addCase(toggleTheme, (state) => {
        return state === 'light' ? 'dark' : 'light'
    })
    .addCase(setTheme, (state, action) => {
        return action.payload
    })
)

Et celui de la fonctionnalité survey  :

export default createReducer(initialState, (builder) =>
    builder
    .addCase(surveyFetching, (draft, action) => {
        if (draft.status === 'void') {
            draft.status = 'pending'
            return
        }
        if (draft.status === 'rejected') {
            draft.error = null
            draft.status = 'pending'
            return
        }
        if (draft.status === 'resolved') {
            draft.status = 'updating'
            return
        }
        return
    })
    .addCase(surveyResolved, (draft, action) => {
        if (draft.status === 'pending' || draft.status === 'updating') {
            draft.data = action.payload
            draft.status = 'resolved'
            return
        }
        return
    })
    .addCase(surveyRejected, (draft, action) => {
        if (draft.status === 'pending' || draft.status === 'updating') {
            draft.error = action.payload
            draft.data = null
            draft.status = 'rejected'
            return
        }
        return
    })
)

Si le code ci-dessus n’est pas limpide pour vous, n’hésitez pas à regarder de nouveau le screencast au-dessus.

Exercez-vous

C’est le moment de mettre en pratique ce que vous avez appris. Dans cet exercice, votre but sera de mettre en place Redux-Toolkit. Vous pouvez vous aider des vidéos de ce chapitre en cas de difficulté.

Voici les étapes à réaliser :

• Installer Redux-Toolkit.

• Utiliser configureStore  .

• Remplacer les actions creator existantes avec createAction  .

• Remplacer les reducers existants avec createReducer  .

Une fois que vous avez terminé, allez jeter un œil à la version corrigée sur la branche P4C1S5-solution du repository React-Redux-Shiny à cette adresse.

En résumé

• Redux-Toolkit est un outil qui permet de faciliter l’utilisation de Redux.

• La fonction configureStore  remplace createStore  et combineReducers  , et connecte le store aux Devtools automatiquement.

• La fonction createAction  permet de créer des action creators, et d’éviter d’avoir à manipuler le nom des actions.

• La fonction createReducer  utilise automatiquement Immer, et facilite l’écriture des reducers.

Vous allez maintenant écrire votre logique Redux plus rapidement grâce aux outils de Redux-Toolkit. Dans le prochain chapitre, nous allons voir une fonctionnalité avancée de Redux : les middlewares. Mais pas de panique, car comme vous allez le découvrir, Redux-Toolkit va encore nous simplifier la vie !