Wat is React Redux en hoe gebruik je het?

Redux is een gratis staatsbeheerbibliotheek die werkt aan de front-end van JavaScript-applicaties en de staat van elk onderdeel binnen een gebruikersinterface beheert. De Redux-bibliotheek maakt een scheiding mogelijk tussen code die gegevens in een applicatie beheert en opslaat, en code die gebeurtenissen en hun effecten op de verschillende componenten van de gebruikersinterface van een applicatie beheert.

Een van de belangrijkste verkoopargumenten van Redux is dat het flexibel is. Je kunt Redux gebruiken met bijna elk JavaScript-framework of -bibliotheek.

Het Redux-team heeft drie bibliotheken gemaakt, namelijk Redux, React-Redux en Redux Toolkit. Alle drie de bibliotheken werken samen om u het meeste uit uw React-ontwikkelingservaring te halen, en in dit zelfstudieartikel leert u hoe u ze kunt gebruiken.

Het belang van React-Redux

Hoewel Redux een onafhankelijke bibliotheek voor staatsbeheer is, vereist het gebruik ervan met elk front-end framework of elke bibliotheek een UI-bindingsbibliotheek. Een UI-bindingsbibliotheek verwerkt de interactielogica van de statuscontainer (of winkel), wat een reeks vooraf gedefinieerde stappen is die een front-end-framework verbindt met de Redux-bibliotheek.

React-Redux is de officiële Redux UI-bindingsbibliotheek voor React-applicaties en wordt onderhouden door het Redux-team.

Verwant: Hoe u uw eerste React-app met JavaScript kunt maken

Redux installeren in uw projectmap

Er zijn twee manieren om toegang te krijgen tot de Redux-bibliotheek in uw React-toepassing. De aanbevolen aanpak door het Redux-team is om de volgende opdracht te gebruiken bij het maken van een nieuw React-project:

npx create-react-app mijn-app --template redux

De bovenstaande opdracht configureert automatisch de Redux Toolkit, React-Redux en de Redux-winkel. Als je Redux echter in een bestaand React-project wilt gebruiken, kun je de Redux-bibliotheek eenvoudig als afhankelijkheid installeren met het volgende commando:

npm installeer redux

Gevolgd door de React-Redux bindende UI-bibliotheek:

npm install react-redux

En de Redux-toolkit:

npm install @reduxjs/toolkit

De Redux Toolkit-bibliotheek is ook belangrijk omdat het het configuratieproces van de Redux-winkel snel en gemakkelijk maakt.

Een Redux-winkel maken

Voordat u met de Redux-bibliotheek kunt gaan werken, moet u een Redux-statuscontainer (of winkel) maken. Het maken van een Redux-winkel is noodzakelijk omdat dit het object is dat de algemene Redux-toepassingsstatus opslaat.

React heeft, zoals de meeste front-end-frameworks, een toegangspunt in zijn applicaties, een bestand of een groep bestanden op het hoogste niveau. De index.html en index.js bestanden zijn twee bestanden die zich op het hoogste niveau van een React-app bevinden, boven de App.js bestand en alle componenten in de app.

Dus de index.js bestand is de ideale plek om een ​​Redux-winkel te maken.

Index.js bijwerken met de Redux Store

import Reageren vanuit 'reageren'
importeer ReactDOM van 'react-dom'
app importeren van './App'
importeer rapportWebVitals uit "./reportWebVitals"
importeer {configureStore} van "@reduxjs/toolkit"
importeer { Provider } van 'react-redux'
importeer gebruiker van './reducers/user'
const store = configureStore({
 verloopstuk:{
 gebruiker
 }
})
ReactDOM.render(




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

Er is veel om uit te pakken in de bovenstaande code, maar de beste plaats om te beginnen is met de configurerenWinkel functie. U zult onmiddellijk de voordelen zien van het installeren van de Redux Toolkit-bibliotheek als de configurerenWinkel functie maakt de Redux-winkel met slechts drie regels code.

Uw React-toepassing zou niet weten dat de Redux-winkel bestaat zonder de providercomponent, die afkomstig is van de React-Redux-bindingsbibliotheek. De providercomponent neemt een enkele prop (de winkel) en wikkelt zich rond de React-app, waardoor de Redux-winkel wereldwijd toegankelijk is.

De derde en laatste nieuwe import in de index.js bestand hierboven is de gebruikersverkleiner, wat van vitaal belang is voor de werking van uw Redux-winkel.

Waarom is een verloopstuk belangrijk?

Het doel van een verloopstuk is om een UI-componentstatus gebaseerd op een actie uitgevoerd. Als u bijvoorbeeld een online schooltoepassing maakt, moet elke gebruiker zich bij de toepassing aanmelden om toegang te krijgen met een aanmeldingscomponent. Een ander geweldig onderdeel voor deze applicatie is een actieve gebruikerscomponent, die de naam of het e-mailadres van elke gebruiker zal weergeven wanneer ze zich aanmelden bij uw applicatie.

In het bovenstaande voorbeeld verandert de actieve gebruikerscomponent elke keer dat een gebruiker de actie uitvoert om zich aan te melden bij zijn account. Dit voorbeeld is dus een ideale situatie voor een verloopstuk. Het is ook belangrijk om te onthouden dat een verloopstuk zijn functie alleen kan uitoefenen vanwege de Redux winkel die het toegang geeft tot de status van een onderdeel en de actie die het nodig heeft om zijn taken.

De gebruikersverkleiner maken

importeer { createSlice } van "@reduxjs/toolkit";
export const userSlice = createSlice({
 naam: "gebruiker",
 initialState: { waarde: {email: ""}},
 verloopstukken: {
 login: (staat, actie) => {
 staat.waarde = actie.payload
 },
 }
})
export const {login} = userSlice.actions
export standaard userSlice.reducer;

Binnen React's srcmap je kunt een maken reducer-map, waar u uw. bewaart gebruikersverkleiner en elk ander verloopstuk dat u aan uw Redux-winkel wilt toevoegen. De gebruiker.js bestand hierboven importeert de createSlice functie uit de Redux Toolkit.

De createSlice functie accepteert a naam, een oorspronkelijke toestand, en een verloop object die meerdere reduceerfuncties opslaat. Het bovenstaande reductieobject heeft echter slechts één reductiefunctie genaamd Log in die een toestand en een actie als argumenten neemt en een nieuwe toestand retourneert.

Het user.js-bestand exporteert de login-reducer. De aanmeldingscomponent importeert het en gebruikt het in de useDispatch() haak.

De aanmeldingscomponent maken

import Reageren vanuit 'reageren';
importeer Link van '@mui/materiaal/Link';
importeer TextField van '@mui/material/TextField';
typografie importeren uit '@mui/materiaal/Typografie';
importeer { Button, Box } van '@mui/material';
import { useDispatch } van 'react-redux';
importeer { login } van '../reducers/user';
importeer { useState } van 'react';
functie Aanmelden() {
 const verzending = useDispatch()
 const [e-mail, setEmail] = useState('')
 const handleSubmit = () => {
 verzending (login({email: email}))
 }
opbrengst (


sx={{
mijn: 8,
weergave: 'flex',
flexDirection: 'kolom',
alignItems: 'midden',
}}>
 Inloggen 
label="E-mailadres"
vereist
id="e-mail"
naam = "e-mail"
margin = "normaal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Wachtwoord"
vereist
id="wachtwoord"
naam = "wachtwoord"
typ = "wachtwoord"
margin = "normaal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
wachtwoord vergeten?

variant = "bevat"
sx={{mt: 2}}
onClick={handleSubmit}
>
Inloggen





);
}
export standaard Aanmelden;

De inlogcomponent hierboven gebruikt de MUI-bibliotheek. Het creëert een eenvoudig aanmeldingsformulier waarvoor het e-mailadres en wachtwoord van een gebruiker vereist zijn. Als u op de aanmeldingsknop klikt, wordt een onClick-functie, die de. zal noemen handvatVerzenden functie.

De handvatVerzenden functie maakt gebruik van de useState() en gebruikDispact() haken samen met de inlogverkleiner om het e-mailadres van een actieve gebruiker beschikbaar te maken in de Redux-winkel. Vanuit de Redux-winkel heeft elk onderdeel in de React-app nu toegang tot de e-mail van een actieve gebruiker.

Verwant: Haken: de held van React De volgende actieve gebruikerscomponent haalt het e-mailadres van een actieve gebruiker op met behulp van de useSelector() haak en geeft het weer aan de gebruikersinterface van de app.

Het bestand ActiveUser.js

import Reageren vanuit "reageren";
importeer { useSelector } van "react-redux";
functie ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 opbrengst (


Actieve gebruikers

 {gebruiker.e-mail} 




 );
}

Het bijgewerkte App.js-bestand

Kijk eens naar dit stukje code:

import Reageren vanuit "reageren"; importeer ActiveUsers van "./components/ActiveUsers"; importeer aanmelding van "./componenten/aanmelding";
functie App() {
opbrengst ( 
);
}
export standaard app; 

De App.js bestand hierboven geeft zowel de actieve gebruikers als de aanmeldingscomponenten in uw React-toepassing weer en creëert de volgende uitvoer in uw browser:

Als een gebruiker zich aanmeldt bij de toepassing, wordt de component voor actieve gebruikers onmiddellijk bijgewerkt met een nieuw e-mailadres voor een actieve gebruiker.

De bijgewerkte gebruikersinterface

Wanneer moet u Redux gebruiken?

Redux is een van de meest populaire bibliotheken voor staatsbeheer, vooral omdat het uitstekend werk levert bij het maken van voorspelbare en betrouwbare code. Als veel componenten in een applicatie dezelfde applicatiestatus gebruiken, is Redux de ideale keuze.

Met behulp van het schoolvoorbeeld hierboven, de inlogcomponent, actieve gebruikerscomponent, klasdeelnemer component, en zelfs een profielcomponent heeft het e-mailadres van een gebruiker nodig (of een ander uniek identificatienummer). Daarom is Redux hier de beste optie.

Als je echter een staat hebt die slechts door een of twee componenten wordt gebruikt, dan is React-rekwisieten een betere optie.

Hoe rekwisieten te gebruiken in ReactJS

Als je op zoek bent naar tips over het gebruik van rekwisieten in ReactJS, dan ben je hier op de juiste plek.

Lees volgende

Over de auteur