Hvad er React Redux, og hvordan bruger du det?

Redux er et gratis tilstandsadministrationsbibliotek, der fungerer på frontenden af ​​JavaScript-applikationer og administrerer tilstanden for hver komponent i en brugergrænseflade. Redux-biblioteket letter en adskillelse mellem kode, der administrerer og gemmer data i en applikation, og kode, der styrer hændelser og deres effekter på de forskellige komponenter i en applikations brugergrænseflade.

Et af de vigtigste salgsargumenter ved Redux er, at det er fleksibelt. Du kan bruge Redux med næsten enhver JavaScript-ramme eller -bibliotek.

Redux-teamet har oprettet tre biblioteker, nemlig Redux, React-Redux og Redux Toolkit. Alle tre biblioteker arbejder sammen for at give dig mest muligt ud af din React-udviklingsoplevelse, og i denne selvstudieartikel lærer du, hvordan du bruger dem.

Vigtigheden af ​​React-Redux

Selvom Redux er et uafhængigt statsadministrationsbibliotek, kræver det et UI-bindende bibliotek at bruge det med enhver frontend-ramme eller ethvert bibliotek. Et UI-bindingsbibliotek håndterer interaktionslogikken til tilstandsbeholderen (eller lageret), som er et sæt foruddefinerede trin, der forbinder en frontend-ramme til Redux-biblioteket.

React-Redux er det officielle Redux UI-bindende bibliotek for React-applikationer, og det vedligeholdes af Redux-teamet.

Relaterede: Sådan opretter du din første React-app med JavaScript

Installation af Redux i din projektmappe

Der er to måder at få adgang til Redux-biblioteket i din React-applikation. Den anbefalede tilgang fra Redux-teamet er at bruge følgende kommando, når du opretter et nyt React-projekt:

npx create-react-app min-app --skabelon redux

Kommandoen ovenfor konfigurerer automatisk Redux Toolkit, React-Redux og Redux-butikken. Men hvis du vil bruge Redux i et eksisterende React-projekt, kan du blot installere Redux-biblioteket som en afhængighed med følgende kommando:

npm installer redux

Efterfulgt af React-Redux-bindende brugergrænsefladebibliotek:

npm installer react-redux

Og Redux-værktøjssættet:

npm installer @reduxjs/toolkit

Redux Toolkit-biblioteket er også vigtigt, fordi det gør Redux-butikskonfigurationsprocessen hurtig og nem.

Oprettelse af en Redux-butik

Før du kan begynde at arbejde med Redux-biblioteket, skal du oprette en Redux-tilstandsbeholder (eller butik). Det er nødvendigt at oprette en Redux-butik, fordi det er objektet, der gemmer den globale Redux-applikationstilstand.

React har, ligesom de fleste front-end-frameworks, et indgangspunkt i sine applikationer, som er en fil eller gruppe af filer på øverste niveau. Det index.html og index.js filer er to filer, der er på det øverste niveau af en React-app, som er over App.js fil og alle komponenterne i appen.

Så index.js fil er det ideelle sted at oprette en Redux-butik.

Opdatering af index.js med Redux Store

importere Reager fra 'reager'
importer ReactDOM fra 'react-dom'
importer app fra './App'
importer rapportWebVitals fra "./reportWebVitals"
importer {configureStore} fra "@reduxjs/toolkit"
importer { Provider } fra 'react-redux'
importer bruger fra './reducers/user'
const store = configureStore({
 reducering:{
 bruger
 }
})
ReactDOM.render(




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

Der er meget at pakke ud i koden ovenfor, men det bedste sted at starte er med configureStore fungere. Du vil straks begynde at se fordelene ved at installere Redux Toolkit-biblioteket som configureStore funktion opretter Redux-butikken med kun tre linjer kode.

Din React-applikation ville ikke vide, at Redux-butikken eksisterer uden udbyderkomponent, som kommer fra React-Redux-bindingsbiblioteket. Udbyderkomponenten tager en enkelt rekvisit (butikken) og vikler sig rundt om React-appen, hvilket gør Redux-butikken globalt tilgængelig.

Den tredje og sidste nye import i index.js filen ovenfor er bruger reduktion, hvilket er meget vigtigt for driften af ​​din Redux-butik.

Hvorfor er en reduktionsanordning vigtig?

Formålet med en reduktion er at ændre en UI-komponenttilstand baseret på en udført handling. Hvis du f.eks. opretter en onlineskoleapplikation, skal du kræve, at hver bruger logger på applikationen for at få adgang ved hjælp af en login-komponent. En anden fantastisk komponent til denne applikation er en aktiv brugerkomponent, som viser hver brugers navn eller e-mailadresse, når de logger ind på din applikation.

I eksemplet ovenfor ændres den aktive brugerkomponent, hver gang en bruger udfører handlingen med at logge ind på sin konto. Dette eksempel er derfor en ideel situation for en reducer. Det er også vigtigt at huske, at en reducer kun kan udføre sin funktion på grund af Redux butik, der giver den adgang til tilstanden af ​​enhver komponent og den handling, den skal bruge for at udføre dens pligter.

Oprettelse af User Reducer

importer { createSlice } fra "@reduxjs/toolkit";
eksport const userSlice = createSlice({
 navn: "bruger",
 initialState: { værdi: {email: ""}},
 reduktionsgear: {
 login: (tilstand, handling) => {
 state.value = handling.nyttelast
 },
 }
})
eksport const {login} = userSlice.actions
eksport standard userSlice.reducer;

Inden for React's srcvejviser du kan oprette en reducerer bibliotek, som er hvor du gemmer din bruger reduktion og enhver anden reducering, du vil tilføje til din Redux-butik. Det bruger.js filen ovenfor importerer skabe Slice funktion fra Redux Toolkit.

Det skabe Slice funktion accepterer en navn, en begyndelsestilstand, og en reduktionsobjekt der gemmer flere reduktionsfunktioner. Dog har reduktionsobjektet ovenfor kun én kaldet reduktionsfunktion Log på der tager en tilstand og en handling som argumenter og returnerer en ny tilstand.

User.js-filen eksporterer login-reduceren. Log-in-komponenten importerer den og bruger den i useDispatch() krog.

Oprettelse af log-in-komponenten

import Reager fra 'reager';
importer link fra '@mui/materiale/Link';
importer TextField fra '@mui/material/TextField';
importer typografi fra '@mui/material/Typography';
importer { Button, Box } fra '@mui/material';
importer { useDispatch } fra 'react-redux';
importer { login } fra '../reducers/user';
importer { useState } fra 'react';
function Login() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 afsendelse (login({email: email}))
 }
Vend tilbage (


sx={{
min: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
 Log ind 
label="E-mail-adresse"
påkrævet
id="e-mail"
name="e-mail"
margin="normal"
onChange={(e) => sætE-mail (e.target.value)}
/>
label="Adgangskode"
påkrævet
id="adgangskode"
name="adgangskode"
type="adgangskode"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
glemme adgangskode?

variant="indeholdt"
sx={{mt: 2}}
onClick={handleSubmit}
>
Log ind





);
}
eksport standard login;

Login-komponenten ovenfor bruger MUI-biblioteket. Det opretter en simpel login-formular, der kræver en brugers e-mail og adgangskode. Ved at klikke på login-knappen udløses en onClick-funktion, som vil kalde handleSend fungere.

Det handleSend funktionen bruger useState() og useDispact() kroge sammen med login reduktion for at gøre en aktiv brugers e-mailadresse tilgængelig i Redux-butikken. Fra Redux-butikken har hver komponent i React-appen nu adgang til en aktiv brugers e-mail.

Relaterede: Hooks: The Hero of React Følgende aktive brugerkomponent henter en aktiv brugers e-mailadresse ved hjælp af useSelector() hook og gengiver den til app-brugergrænsefladen.

ActiveUser.js-filen

import Reager fra "reager";
importer { useSelector } fra "react-redux";
function ActiveUsers() {
 const bruger = useSelector((tilstand) => tilstand.bruger.værdi)
 Vend tilbage (


Aktive brugere

 {bruger.e-mail} 




 );
}

Den opdaterede App.js-fil

Tag et kig på denne kodebit:

import Reager fra "reager"; importer ActiveUsers fra "./components/ActiveUsers"; importer Signin fra "./components/Signin";
funktion App() {
Vend tilbage ( 
);
}
eksport standard app; 

Det App.js ovenstående fil gengiver både de aktive brugere og login-komponenter i din React-applikation og skaber følgende output i din browser:

Hvis en bruger logger ind på applikationen, opdateres den aktive brugerkomponent straks med en ny aktiv bruger-e-mail.

Den opdaterede brugergrænseflade

Hvornår skal du bruge Redux?

Redux er et af de mest populære statsforvaltningsbiblioteker, primært fordi det gør et fremragende stykke arbejde med at skabe forudsigelig og pålidelig kode. Hvis mange komponenter i en applikation bruger den samme applikationstilstand, er Redux det ideelle valg.

Ved at bruge skoleeksemplet ovenfor, login-komponenten, aktiv brugerkomponent, klassedeltager komponent, og endda en profilkomponent skal bruge en brugers e-mailadresse (eller en anden unik identifikator). Derfor er Redux den bedste mulighed her.

Men hvis du har en tilstand, der kun bruges af en eller to komponenter, kan en bedre mulighed være React-rekvisitter.

Sådan bruges rekvisitter i ReactJS

Hvis du leder efter tips til, hvordan du bruger rekvisitter i ReactJS, er du på det rigtige sted.

Læs Næste

Om forfatteren