React-Redux : Guide du débutant

Si vous désirez plus de contenu francophone comme celui-ci, cliquer Follow ou suivez-moi sur Twitter

Votre application devient de plus en plus complexe ?

Au fil du temps, votre application React devient plus complexe, avec plus de component et plus de données entrant et sortant. La gestion simultanée du 'state' de plusieurs component et sous-component peut devenir très complexe.

Existe-t-il un meilleur moyen de gérer l'état de tous les components et sous-component de votre application ? Oui et cette bibliothèque s'appelle Redux.

Qu'est-ce que Redux

Redux est la solution de gestion de 'state' la plus populaire.

À ce jour, Redux est la norme adoptée par les grandes entreprises.

Redux utilise un 'store', de sorte que tout les 'state' de l'application sont géré par un objet central.

Voici trois principes fondamentaux de Redux :

Le 'state' de l'ensemble de votre application est stocké dans une arborescence d'objets au sein d'un seul 'store' qui agit comme la seule source de vérité pour votre application.

S'assurer que le 'state' est en lecture seule et nécessite des modifications en émettant une action descriptive.

Spécifie comment les 'state' sont transformé par les actions, vous écrivez des fonctions 'reducer' pures.

Le 'state' complet de votre application est centralisé en un seul endroit.

Plus besoin de utiliser un paquet de 'props' entre les components et les sous-components.

Pas besoin d'envoyer des 'props' aux components enfants ou des fonctions 'callback' aux components parents.

Avec Redux, votre 'state' est désormais centralisé en un seul endroit et chaque component peut y accéder directement.

Lorsque vous utilisez Redux, le 'store' centralisé est désormais le seul endroit où le 'state' sera modifié dans votre application.

Le 'state' peut être modifié dans votre 'store' en envoyant différentes actions. Par exemple une action à ajouter, une autre action à mettre à jour, une autre action à supprimer, etc.

Installation de Redux

À partir d'un dossier de projet React déjà créé, vous pouvez taper dans le terminal

$ npm install @reduxjs/toolkit react-redux

create-react-app

Si votre application n'est pas encore créée, vous pouvez la créer avec redux store déjà installé et pré-configuré.

$ npx create-react-app my-app --template redux

À noter. Pour ce tutoriel, nous n'utilisons pas create-react-app --template redux

Dans ce tutoriel, nous configurons une application Redux à partir de zéro en utilisant Redux Toolkit pour configurer un 'store' Redux

Outils de développement Redux

Vous pouvez également installer un DevToll dans votre navigateur qui sera pratique pour le déboguage. Pour Chrome, il existe un extension nommé Redux DevTools

Comment fonctionne Redux ?

Redux change la façon dont vous allez coder votre application. Redux introduit également de nombreux nouveaux termes spécifiques à Redux tels que 'store', 'provider', 'splice', 'reducer', 'selector', action, etc.

Avant de créer tous ces éléments et de faire fonctionner votre store. Nous devons prendre du recul et essayer de comprendre le concept dans son ensemble.

L'objectif que nous essayons d'atteindre est de trouver un moyen plus efficace de gérer le state de tous nos composants et sous-composants sans utiliser le 'props drilling'.

Pour ce faire, nous utilisons Redux. Redux centralise tout notre state en un seul endroit. Cet endroit centralisé s'appelle le store.

Création d'un store
La première étape consiste à créer votre store Redux.

Créez un fichier js : src/app/store.js et tapez le code d'initialization suivant:

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {},
})

Cici va créer un store Redux avec un reducer (vide pour le moment) Je vais expliquer le reducer un peu plus tard.

Rendre le store disponible pour React

Une fois le store créé, nous pouvons le rendre disponible pour nos components React en plaçant un 'provider' React-Redux autour de notre application dans src/index.js.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Importez le store Redux que nous venons de créer, placez un provider autour de votre application et transmettez le store en tant que 'props'. Désormais, le store est disponible pour tous les components du provider.

Selectors

Étant donné que l'e state de nos components est à un endroit central, nous avons besoin d'un moyen de faire appel à ce store pour récupérer un state. Redux a une fonction Hook pour aider à faire exactement cela.

Par exemple, dans votre store, vous pouvez avoir un selector nommé selectItems (nous le créerons plus tard). Ce sélecteur, par exemple, pourrait renvoyer tous les articles de votre panier e-commerce.

Dans votre component, vous pouvez utiliser un Hook pour appeler ce sélecteur et récupérer vos articles.

import { useSelector } from 'react-redux'
const items = useSelector(selectItems)

Comme vous pouvez le voir, la récupération de l'état de votre store est très facile. Où que vous soyez dans votre components, vous pouvez toujours facilement récupérer le state..

Reducers

Qu'en est-il de la modification du state ? Par exemple, ajouter ou supprimer des éléments ? Comment pouvez-vous dire à votre store que vous souhaitez ajouter ou supprimer un article ? Vous utiliserez une fonction de type 'reducer' .

Les fonctions 'reducer' ne change jamais le state actuel. Il renvoie toujours un nouvel objet state mis à jour.

Par exemple, vous pouvez avoir un nom de fonction 'reducer' addItemToBasket. Cette fonction renverra le nouveau state qui inclut le nouvel élément.

Dans votre composant, vous pouvez appeler la fonction 'reducer' en utilisant le hook dispatch

import { useDispatch } from 'react-redux'
import { addItemToBasket } from './basketSlice'
const dispatch = useDispatch()

return ( 
  <button onClick={() => dispatch(addItemToBasket(item))}>Add</button>
)

Où et comment déclarons-nous les 'selector' et les 'reducer' ?

Les selector et les reducer peuvent être créés à l'aide de la fonction createSlice.

Le nom « Slice » vient de l'idée que nous divisons le state de notre application en plusieurs « tranches » .

Par exemple, pour une application e-commerce, une 'slice' peut être le panier, une autre pour les utilisateurs, une autre pour les produits, etc.

C'est une bonne idée car nous avons besoin d'un moyen de regrouper nos selector et reducer, nous ne pouvons pas mettre toutes ces fonctions dans un seul gros fichier. Mieux vaut donc les regrouper par slice.

Par exemple, si vous souhaitez créer une slice pour le state de votre panier, vous créerez un fichier : scr/app/features/basketSlice.js

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

const initialState = {
  items: [
    {id: 1, name: 'iPhone10'},
    {id: 2, name: 'iPadPro'},
    {id: 3, name: 'iWatch'},
]
};
let nextId = 4
export const basketSlice = createSlice({
  name: 'basket',
  initialState,

  reducers: {
    addItemToBasket: (state, action) => {
      console.log('in')
      state.items = [...state.items, {id: nextId, name: action.payload.name}]
      nextId += 1
    },
    removeItemFromBasket: (state, action) => {
      state.items = state.items.filter(item => item.id !== action.payload.id)
    },
  },
});

export const { addItemToBasket, removeItemFromBasket } = basketSlice.actions;

export const selectItems = (state) => state.basket.items;

export default basketSlice.reducer;

This basket slice contain 2 reducers and one selector.

C'est tout ?

Pouvons-nous maintenant utiliser ces reducer et selector dans nos components ? Pas encore. Nous devons enregistrer le réducteur auprès du store. Pour cela revisitez le store.js que vous avez créé plus tôt et ajoutez le reducer basketSlice.

import { configureStore } from '@reduxjs/toolkit';
import basketReducer from '../features/basket/basketSlice';

export const store = configureStore({
  reducer: {
    basket: basketReducer,
  },
});

Maintenant, le basket slice est disponible pour tous les composants de notre application

Résumé

Bon récapitulons :

Nous avons un store qui contient toutle state de notre application.

Nous créons notre app store dans : scr/app/store.js

Pour rendre ce store disponible pour vos components Nous ajoutons la balise Provider entre notre composant de niveau supérieur (App)

Pour récupérer ou muter les données du store, nous devons utiliser des selector et des reducer.

Les selector et les reducer sont regroupés par slice

Pour appeler un selector, nous utilisons le hook useSelector(). Par exemple : items = useSelector(basketItems)

Pour appeler l'action du reducer, nous utilisons le hook useDispatch(). Par exemple : dispatch(addItemToBasket(item))

Conclusion

Ouf c'est beaucoup de concept en une seule lecture. Si vous ne comprenez pas tout, c'est normal. Lisez cet article plus d'une fois et poursuivez votre apprentissage sur le Web avec d'autres tutoriels.