Qu'est-ce que React Redux et comment l'utilisez-vous ?

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.

En rapport: Comment créer votre première application React avec JavaScript

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 installer le redux

Suivi de la bibliothèque d'interface utilisateur de liaison React-Redux :

npm installer réagir-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 (ou un magasin) d'état Redux. 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

importer React à partir de 'react'
importer ReactDOM depuis 'react-dom'
importer l'application depuis './App'
importer reportWebVitals à partir de "./reportWebVitals"
importer {configureStore} depuis "@reduxjs/toolkit"
importer { fournisseur } depuis 'react-redux'
importer l'utilisateur de './reducers/user'
const store = configureStore({
 réducteur :{
 utilisateur
 }
})
ReactDOM.render(




,
 document.getElementById('root')
)
rapportWebVitals();

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 Redux store qui lui donne accès à l'état de n'importe quel composant et à l'action dont il a besoin pour effectuer son fonctions.

Création du réducteur utilisateur

importer { createSlice } depuis "@reduxjs/toolkit" ;
export const userSlice = createSlice({
 nom: "utilisateur",
 état initial: { valeur: {e-mail: ""}},
 réducteurs: {
 login: (état, action) => {
 état.valeur = action.charge utile
 },
 }
})
export const {login} = userSlice.actions
exporter userSlice.reducer par défaut ;

Au sein de React srcannuaire 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

importer React à partir de « react » ;
importer le lien depuis '@mui/material/Link' ;
importer TextField depuis '@mui/material/TextField' ;
importer la typographie de '@mui/material/Typography' ;
importer { Button, Box } de '@mui/material' ;
import { useDispatch } depuis 'react-redux' ;
importer { login } depuis '../reducers/user' ;
importer { useState } depuis 'react' ;
function Connexion() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 dispatch (login({email: email}))
 }
retourner (


sx={{
mon: 8,
afficher: 'flex',
flexDirection: 'colonne',
alignItems: 'center',
}}>
 S'identifier 
label="Adresse e-mail"
obligatoire
id="e-mail"
nom="e-mail"
marge="normale"
onChange={(e) => setEmail (e.target.value)}
/>
label="Mot de passe"
obligatoire
id="mot de passe"
nom="mot de passe"
type="mot de passe"
marge="normale"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
mot de passe oublié?

variant="contenu"
sx={{mt: 2}}
onClick={handleSubmit}
>
S'identifier





);
}
exporter la connexion par défaut ;

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.

En rapport: Crochets: le héros de React 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

importer React à partir de "react" ;
importer { useSelector } de "react-redux" ;
function Utilisateurs Actifs() {
 const user = useSelector((state) => state.user.value)
 retourner (


Utilisateurs actifs

 {user.email} 




 );
}

Le fichier App.js mis à jour

Regarde ce bout de code :

importer React à partir de "react"; importer ActiveUsers de "./components/ActiveUsers"; importer la connexion à partir de "./components/Signin" ;
fonction App() {
retourner ( 
);
}
exporter l'application par défaut; 

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 d'école ci-dessus, le composant de connexion, le composant d'utilisateur actif, le participant de classe composant, et même un composant de profil aura besoin de l'adresse e-mail d'un utilisateur (ou d'un autre identifiant). 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 plus, alors une meilleure option peut être les accessoires React.

Comment utiliser les accessoires dans ReactJS

Si vous cherchez des conseils sur l'utilisation des accessoires dans ReactJS, vous êtes au bon endroit.

Lire la suite

A propos de l'auteur