Ce este React Redux și cum îl folosiți?

Redux este o bibliotecă gratuită de gestionare a stării care funcționează pe front-end-ul aplicațiilor JavaScript, gestionând starea fiecărei componente într-o interfață de utilizare. Biblioteca Redux facilitează o separare între codul care gestionează și stochează date într-o aplicație și codul care gestionează evenimentele și efectele acestora asupra diferitelor componente ale interfeței de utilizare a unei aplicații.

Unul dintre principalele puncte de vânzare ale Redux este faptul că este flexibil. Puteți utiliza Redux cu aproape orice cadru sau bibliotecă JavaScript.

Echipa Redux a creat trei biblioteci, și anume Redux, React-Redux și Redux Toolkit. Toate cele trei biblioteci lucrează împreună pentru a vă oferi maximum de experiență de dezvoltare React, iar în acest articol tutorial, veți învăța cum să le utilizați.

Importanța React-Redux

Deși Redux este o bibliotecă independentă de management de stat, utilizarea acesteia cu orice cadru front-end sau bibliotecă necesită o bibliotecă de legare a UI. O bibliotecă de legare a interfeței de utilizator se ocupă de logica de interacțiune a containerului de stare (sau a magazinului), care este un set de pași predefiniti care conectează un cadru front-end la biblioteca Redux.

React-Redux este biblioteca oficială Redux UI de legare pentru aplicațiile React și este întreținută de echipa Redux.

Legate de: Cum să creezi prima ta aplicație React cu JavaScript

Instalarea Redux în directorul proiectelor dvs

Există două moduri de a obține acces la biblioteca Redux din aplicația React. Abordarea recomandată de echipa Redux este să utilizați următoarea comandă atunci când creați un nou proiect React:

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

Comanda de mai sus configurează automat setul de instrumente Redux, React-Redux și magazinul Redux. Cu toate acestea, dacă doriți să utilizați Redux într-un proiect React existent, atunci puteți instala pur și simplu biblioteca Redux ca dependență cu următoarea comandă:

npm install redux

Urmează biblioteca UI de legare React-Redux:

npm instalează react-redux

Și setul de instrumente Redux:

npm instalează @reduxjs/toolkit

Biblioteca Redux Toolkit este, de asemenea, importantă, deoarece face procesul de configurare a magazinului Redux rapid și ușor.

Crearea unui magazin Redux

Înainte de a începe să lucrați cu biblioteca Redux, va trebui să creați un container de stare Redux (sau un magazin). Crearea unui magazin Redux este necesară deoarece este obiectul care stochează starea globală a aplicației Redux.

React, ca majoritatea framework-urilor front-end, are un punct de intrare în aplicațiile sale, care este un fișier sau un grup de fișiere la nivelul superior. The index.html și index.js fișierele sunt două fișiere care se află la nivelul superior al unei aplicații React, care se află deasupra App.js fișier și toate componentele din aplicație.

Asa ca index.js fișierul este locul ideal pentru a crea un magazin Redux.

Actualizarea index.js cu Magazinul Redux

import React de la „react”
importați ReactDOM din „react-dom”
importați aplicația din „./App”
importați reportWebVitals din „./reportWebVitals”
importați {configureStore} din „@reduxjs/toolkit”
import { Provider } din 'react-redux'
import utilizator din „./reducers/user”
const store = configureStore({
 reductor:{
 utilizator
 }
})
ReactDOM.render(




,
 document.getElementById('rădăcină')
)
raportWebVitals();

Există multe de despachetat în codul de mai sus, dar cel mai bun loc pentru a începe este cu configureStore funcţie. Imediat veți începe să vedeți beneficiile instalării bibliotecii Redux Toolkit ca configureStore funcția creează magazinul Redux cu doar trei linii de cod.

Aplicația dvs. React nu ar ști că magazinul Redux există fără componenta furnizorului, care provine din biblioteca de legături React-Redux. Componenta furnizorului ia un singur suport (magazinul) și se înfășoară în jurul aplicației React, făcând magazinul Redux accesibil la nivel global.

Al treilea și ultimul nou import în index.js fișierul de mai sus este reductor utilizator, care este de o importanță vitală pentru funcționarea magazinului dvs. Redux.

De ce este important un reductor?

Scopul unui reductor este de a schimba a starea componentei UI bazat pe a acțiune efectuată. De exemplu, dacă creați o aplicație școlară online, va trebui ca fiecare utilizator să se conecteze la aplicație pentru a obține acces folosind o componentă de conectare. O altă componentă excelentă pentru această aplicație este o componentă de utilizator activă, care va afișa numele sau adresa de e-mail a fiecărui utilizator atunci când se conectează la aplicația dvs.

În exemplul de mai sus, componenta utilizator activă se va modifica de fiecare dată când un utilizator efectuează acțiunea de conectare la contul său. Acest exemplu este, prin urmare, o situație ideală pentru un reductor. De asemenea, este important să ne amintim că un reductor își poate îndeplini funcția doar datorită Redux-ului magazin care îi oferă acces la starea oricărei componente și la acțiunea de care are nevoie pentru a-și desfășura atribuțiile.

Crearea reductorului de utilizatori

import { createSlice } din „@reduxjs/toolkit”;
export const userSlice = createSlice({
 nume: „utilizator”,
 initialState: { valoare: {email: ""}},
 reductoare: {
 autentificare: (stare, acțiune) => {
 stare.valoare = acțiune.sarcină utilă
 },
 }
})
export const {login} = userSlice.actions
export implicit userSlice.reducer;

În cadrul lui React srcdirector puteți crea o directorul reductorului, care este locul în care vă veți depozita reductor utilizator și orice alt reductor pe care doriți să-l adăugați în magazinul dvs. Redux. The user.js fișierul de mai sus importă fișierul createSlice funcția din setul de instrumente Redux.

The createSlice funcția acceptă a Nume, an stare initiala, și a obiect reductor care stochează mai multe funcții de reducere. Cu toate acestea, obiectul reductoare de mai sus are o singură funcție de reducere numită Autentificare care ia ca argumente o stare și o acțiune și returnează o stare nouă.

Fișierul user.js exportă reductorul de conectare. Componenta de conectare o importă și o folosește în useDispatch() cârlig.

Crearea componentei de conectare

import React din 'react';
import Link de la „@mui/material/Link”;
import TextField din „@mui/material/TextField”;
import Typography din „@mui/material/Typography”;
import { Button, Box } din „@mui/material”;
import { useDispatch } din 'react-redux';
import { login } din '../reducers/user';
import { useState } din 'react';
function Signin() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 expediere (login({email: email}))
 }
întoarcere (


sx={{
al meu: 8,
afișaj: „flex”,
flexDirection: „coloană”,
alignItems: „centru”,
}}>
 Conectare 
label="Adresa de e-mail"
necesar
id="email"
name="email"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Parolă"
necesar
id="parolă"
nume="parolă"
tip="parolă"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
parola uitata?

variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Conectare





);
}
export implicit Login;

Componenta de conectare de mai sus folosește biblioteca MUI. Acesta creează un formular simplu de conectare care necesită e-mailul și parola unui utilizator. Făcând clic pe butonul de conectare va declanșa o funcția onClick, care va numi handleSubmit funcţie.

The handleSubmit funcția folosește useState() și useDispact() cârlige împreună cu reductor de conectare pentru a face disponibilă adresa de e-mail a unui utilizator activ în magazinul Redux. Din magazinul Redux, fiecare componentă din aplicația React are acum acces la e-mailul unui utilizator activ.

Legate de: Hooks: Eroul lui React Următoarea componentă de utilizator activ preia adresa de e-mail a unui utilizator activ cu ajutorul useSelector() cârlig și îl redă în interfața de utilizare a aplicației.

Fișierul ActiveUser.js

import React din "react";
import { useSelector } din "react-redux";
function ActiveUsers() {
 utilizator const = useSelector((state) => state.user.value)
 întoarcere (


Utilizatori activi

 {user.email} 




 );
}

Fișierul App.js actualizat

Aruncă o privire la acest fragment de cod:

import React din "react"; importați ActiveUsers din „./components/ActiveUsers”; import Signin din „./components/Signin”;
function App() {
întoarcere ( 
);
}
exportați aplicația implicită; 

The App.js fișierul de mai sus redă atât utilizatorii activi, cât și componentele de conectare în aplicația dvs. React, creând următoarea ieșire în browser:

Dacă un utilizator se conectează la aplicație, componenta utilizatori activi se va actualiza imediat cu un nou e-mail de utilizator activ.

Interfața de utilizare actualizată

Când ar trebui să utilizați Redux?

Redux este una dintre cele mai populare biblioteci de management de stat, în principal pentru că face o treabă excelentă de a crea cod previzibil și de încredere. Dacă multe componente dintr-o aplicație folosesc aceeași stare de aplicație, Redux este alegerea ideală.

Folosind exemplul școlii de mai sus, componenta de conectare, componenta utilizator activ, participant la clasă componentă și chiar și o componentă de profil va avea nevoie de adresa de e-mail a unui utilizator (sau de o altă unică identificator). Acesta este motivul pentru care Redux este cea mai bună opțiune aici.

Cu toate acestea, dacă aveți o stare care este folosită doar de una sau două componente cel mult, atunci o opțiune mai bună poate fi elementele de recuzită React.

Cum să utilizați elementele de recuzită în ReactJS

Dacă cauți sfaturi despre cum să folosești recuzita în ReactJS, ești în locul potrivit.

Citiți în continuare

Despre autor