Redux est une bibliothèque de gestion d’état gratuite qui fonctionne sur le front-end des applications JavaScript, gérant l’état de chaque composant au sein d’une interface utilisateur. La bibliothèque Redux facilite la séparation entre le code qui gère et stocke les données dans une application et le code qui gère les événements et leurs effets sur les différents composants de l’interface utilisateur d’une application.
L’un des principaux arguments de vente de Redux est sa flexibilité. Vous pouvez utiliser Redux avec presque n’importe quel framework ou bibliothèque JavaScript.
L’équipe Redux a créé trois bibliothèques, à savoir Redux, React-Redux et Redux Toolkit. Les trois bibliothèques fonctionnent ensemble pour vous tirer le meilleur parti de votre expérience de développement React, et dans cet article de didacticiel, vous apprendrez à les utiliser.
L’importance de React-Redux
Bien que Redux soit une bibliothèque de gestion d’état indépendante, son utilisation avec n’importe quel framework ou bibliothèque frontale nécessite une bibliothèque de liaison d’interface utilisateur. Une bibliothèque de liaison d’interface utilisateur gère la logique d’interaction du conteneur d’état (ou du magasin), qui est un ensemble d’étapes prédéfinies qui connecte un framework frontal à la bibliothèque Redux.
React-Redux est la bibliothèque officielle de liaison d’interface utilisateur Redux pour les applications React, et elle est maintenue par l’équipe Redux.
Installation de Redux dans votre répertoire de projet
Il existe deux manières d’accéder à la bibliothèque Redux dans votre application React. L’approche recommandée par l’équipe Redux consiste à utiliser la commande suivante lors de la création d’un nouveau projet React :
npx create-react-app my-app --template redux
La commande ci-dessus configure automatiquement Redux Toolkit, React-Redux et le magasin Redux. Cependant, si vous souhaitez utiliser Redux dans un projet React existant, vous pouvez simplement installer la bibliothèque Redux en tant que dépendance avec la commande suivante :
npm install redux
Suivi de la bibliothèque d’interface utilisateur de liaison React-Redux :
npm install react-redux
Et la boîte à outils Redux :
npm install @reduxjs/toolkit
La bibliothèque Redux Toolkit est également importante car elle rend le processus de configuration du magasin Redux rapide et facile.
Création d’un magasin Redux
Avant de pouvoir commencer à travailler avec la bibliothèque Redux, vous devez créer un conteneur d’état Redux (ou un magasin). La création d’un magasin Redux est nécessaire car c’est l’objet qui stocke l’état global de l’application Redux.
React, comme la plupart des frameworks front-end, a un point d’entrée dans ses applications, qui est un fichier ou un groupe de fichiers au niveau supérieur. le index.html et index.js les fichiers sont deux fichiers qui se trouvent au niveau supérieur d’une application React, qui est au-dessus du App.js fichier et tous les composants de l’application.
Alors le index.js file est l’endroit idéal pour créer un magasin Redux.
Mise à jour d’index.js avec le Redux Store
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import configureStore from "@reduxjs/toolkit"
import Provider from 'react-redux'
import user from './reducers/user'
const store = configureStore(
reducer:
user
)
ReactDOM.render(
<React.StrictMode>
<Provider store=store>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
reportWebVitals();
Il y a beaucoup de choses à déballer dans le code ci-dessus, mais le meilleur endroit pour commencer est avec le configurerStore une fonction. Immédiatement, vous commencerez à voir les avantages de l’installation de la bibliothèque Redux Toolkit en tant que configurerStore La fonction crée le magasin Redux avec seulement trois lignes de code.
Votre application React ne saurait pas que le magasin Redux existe sans le composant fournisseur, qui provient de la bibliothèque de liaisons React-Redux. Le composant fournisseur prend un seul accessoire (le magasin) et s’enroule autour de l’application React, rendant le magasin Redux accessible dans le monde entier.
La troisième et dernière nouvelle importation dans le index.js fichier ci-dessus est le réducteur d’utilisateur, ce qui est d’une importance vitale pour le fonctionnement de votre magasin Redux.
Pourquoi un réducteur est-il important ?
Le but d’un réducteur est de changer un État du composant de l’interface utilisateur basé sur un action effectuée. Par exemple, si vous créez une application scolaire en ligne, vous aurez besoin que chaque utilisateur se connecte à l’application pour y accéder à l’aide d’un composant de connexion. Un autre excellent composant pour cette application est un composant utilisateur actif, qui affichera le nom ou l’adresse e-mail de chaque utilisateur lorsqu’il se connectera à votre application.
Dans l’exemple ci-dessus, le composant utilisateur actif changera chaque fois qu’un utilisateur effectuera l’action de se connecter à son compte. Cet exemple est donc une situation idéale pour un réducteur. Il est également important de se rappeler qu’un réducteur ne peut remplir sa fonction qu’à cause du magasin Redux qui lui donne accès à l’état de n’importe quel composant et à l’action dont il a besoin pour remplir ses fonctions.
Création du réducteur utilisateur
import createSlice from "@reduxjs/toolkit";
export const userSlice = createSlice(
name: "user",
initialState: value: email: "",
reducers:
login: (state, action) =>
state.value = action.payload
,
)
export const login = userSlice.actions
export default userSlice.reducer;
Au sein de React src annuaire vous pouvez créer un répertoire du réducteur, c’est là que vous stockerez votre réducteur d’utilisateur et tout autre réducteur que vous souhaitez ajouter à votre magasin Redux. le user.js fichier ci-dessus importe le créer une tranche fonction de la boîte à outils Redux.
le créer une tranche fonction accepte un Nom, une Etat initial, et un objet réducteur qui stocke plusieurs fonctions de réduction. Cependant, l’objet réducteur ci-dessus n’a qu’une seule fonction de réduction appelée connexion qui prend un état et une action comme arguments et renvoie un nouvel état.
Le fichier user.js exporte le réducteur de connexion. Le composant de connexion l’importe et l’utilise dans le useDispatch() accrocher.
Création du composant de connexion
import React from 'react';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Button, Box from '@mui/material';
import useDispatch from 'react-redux';
import login from '../reducers/user';
import useState from 'react';
function Signin()
const dispatch = useDispatch()
const [email, setEmail] = useState('')
const handleSubmit = () =>
dispatch(login(email: email))
return (
<div>
<Box
sx=
my: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
>
<Typography variant="h4"> Sign In </Typography>
<TextField
label="Email Address"
required
id="email"
name="email"
margin="normal"
onChange=(e) => setEmail(e.target.value)
/>
<TextField
label="Password"
required
id="password"
name="password"
type="password"
margin="normal"
/>
<Link
href="#"
sx=mr: 12, mb: 2
>
forget password?
</Link>
<Button
variant="contained"
sx=mt: 2
onClick=handleSubmit
>
Sign In
</Button>
</Box>
</div>
);
export default Signin;
Le composant de connexion ci-dessus utilise la bibliothèque MUI. Il crée un formulaire de connexion simple qui nécessite l’e-mail et le mot de passe d’un utilisateur. Cliquer sur le bouton de connexion déclenchera un fonction onClick, qui appellera le poignéeEnvoyer une fonction.
le poignéeEnvoyer la fonction utilise le useState() et useDispact() crochets avec le réducteur de connexion pour rendre l’adresse e-mail d’un utilisateur actif disponible dans la boutique Redux. Depuis le magasin Redux, chaque composant de l’application React a désormais accès à l’e-mail d’un utilisateur actif.
Le composant utilisateur actif suivant récupère l’adresse e-mail d’un utilisateur actif à l’aide du crochet useSelector() et le rend à l’interface utilisateur de l’application.
Le fichier ActiveUser.js
import React from "react";
import useSelector from "react-redux";function ActiveUsers()
const user = useSelector((state) => state.user.value)
return (
<div>
<h2>Active Users</h2>
<p> user.email </p>
</div>
);
Le fichier App.js mis à jour
Regarde ce bout de code :
import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin";
function App()
return ( <div> <ActiveUsers/> <Signin/> </div>
);
export default App; le App.js ci-dessus affiche à la fois les utilisateurs actifs et les composants de connexion dans votre application React, créant la sortie suivante dans votre navigateur :
Si un utilisateur se connecte à l’application, le composant des utilisateurs actifs sera immédiatement mis à jour avec un nouvel e-mail d’utilisateur actif.
L’interface utilisateur mise à jour
Quand devriez-vous utiliser Redux ?
Redux est l’une des bibliothèques de gestion d’état les plus populaires, principalement parce qu’elle fait un excellent travail de création de code prévisible et fiable. Si de nombreux composants d’une application utilisent le même état d’application, Redux est le choix idéal.
En utilisant l’exemple de l’école ci-dessus, le composant de connexion, le composant d’utilisateur actif, le composant de participant de classe et même un composant de profil auront besoin de l’adresse e-mail d’un utilisateur (ou d’un autre identifiant unique). C’est pourquoi Redux est la meilleure option ici.
Cependant, si vous avez un état qui n’est utilisé que par un ou deux composants au maximum, alors une meilleure option peut être les accessoires React.
Lire la suite
A propos de l’auteur