React-Redux : Guide du dbutant

Si vous dsirez 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 donnes entrant et sortant. La gestion simultane du 'state' de plusieurs component et sous-component peut devenir trs complexe.

Existe-t-il un meilleur moyen de grer l'tat de tous les components et sous-component de votre application? Oui et cette bibliothque 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 adopte par les grandes entreprises.

Redux utilise un 'store', de sorte que tout les 'state' de l'application sont gr 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 vrit pour votre application.

• S'assurer que le 'state' est en lecture seule et ncessite des modifications en mettant une action descriptive.

• Spcifie 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 dsormais centralis en un seul endroit et chaque component peut y accder directement.

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

Le 'state' peut tre modifi dans votre 'store' en envoyant diffrentes 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 dj cr, vous pouvez taper dans le terminal

$ npm install @reduxjs/toolkit react-redux

create-react-app

Si votre application n'est pas encore cre, vous pouvez la crer avec redux store dj 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 zro en utilisant Redux Toolkit pour configurer un 'store' Redux

Outils de dveloppement Redux

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

Comment fonctionne Redux?

Redux change la faon dont vous allez coder votre application. Redux introduit galement de nombreux nouveaux termes spcifiques Redux tels que 'store', 'provider', 'splice', 'reducer', 'selector', action, etc.

Avant de crer tous ces lments 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 grer 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.

Cration d'un store
La premire tape consiste crer votre store Redux.

Crez 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 crer 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 plaant 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 crer, placez un provider autour de votre application et transmettez le store en tant que 'props'. Dsormais, 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 rcuprer 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 crerons plus tard). Ce slecteur, par exemple, pourrait renvoyer tous les articles de votre panier e-commerce.

Dans votre component, vous pouvez utiliser un Hook pour appeler ce slecteur et rcuprer vos articles.

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

Comme vous pouvez le voir, la rcupration de l'tat de votre store est trs facile. O que vous soyez dans votre components, vous pouvez toujours facilement rcuprer le state..

Reducers

Qu'en est-il de la modification du state? Par exemple, ajouter ou supprimer des lments? 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 lment.

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 dclarons-nous les 'selector' et les 'reducer'?

Les selector et les reducer peuvent tre crs l'aide de la fonction createSlice.

Le nom Slice vient de l'ide 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 ide 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 crer une slice pour le state de votre panier, vous crerez 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 = 4export 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 rducteur auprs du store. Pour cela revisitez le store.js que vous avez cr plus tt 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

Rsum

Bon rcapitulons :

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

• Nous crons 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 suprieur (App)

• Pour rcuprer ou muter les donnes du store, nous devons utiliser des selector et des reducer.

• Les selector et les reducer sont regroups 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.