Hva er React Redux og hvordan bruker du det?

Redux er et gratis tilstandsadministrasjonsbibliotek som fungerer på front-end av JavaScript-applikasjoner, og administrerer tilstanden til hver komponent i et brukergrensesnitt. Redux-biblioteket forenkler et skille mellom kode som administrerer og lagrer data i en applikasjon, og kode som administrerer hendelser og deres effekter på de ulike komponentene i en applikasjons brukergrensesnitt.

Et av de viktigste salgsargumentene til Redux er at det er fleksibelt. Du kan bruke Redux med nesten hvilket som helst JavaScript-rammeverk eller bibliotek.

Redux-teamet har opprettet tre biblioteker, nemlig Redux, React-Redux og Redux Toolkit. Alle tre bibliotekene jobber sammen for å gi deg mest mulig ut av React-utviklingsopplevelsen din, og i denne opplæringsartikkelen lærer du hvordan du bruker dem.

Viktigheten av React-Redux

Selv om Redux er et uavhengig statlig administrasjonsbibliotek, krever bruk av det med et hvilket som helst front-end-rammeverk eller bibliotek et UI-bindende bibliotek. Et UI-bindingsbibliotek håndterer interaksjonslogikken for tilstandsbeholder (eller lagring), som er et sett med forhåndsdefinerte trinn som kobler et front-end-rammeverk til Redux-biblioteket.

React-Redux er det offisielle Redux UI-bindende biblioteket for React-applikasjoner, og det vedlikeholdes av Redux-teamet.

I slekt: Hvordan lage din første reaksjonsapp med JavaScript

Installere Redux i din prosjektkatalog

Det er to måter å få tilgang til Redux-biblioteket i din React-applikasjon. Den anbefalte tilnærmingen til Redux-teamet er å bruke følgende kommando når du oppretter et nytt React-prosjekt:

npx create-react-app min-app --mal redux

Kommandoen ovenfor konfigurerer automatisk Redux Toolkit, React-Redux og Redux-butikken. Imidlertid, hvis du vil bruke Redux i et eksisterende React-prosjekt, kan du ganske enkelt installere Redux-biblioteket som en avhengighet med følgende kommando:

npm installer redux

Etterfulgt av React-Redux-bindende brukergrensesnittbibliotek:

npm installer react-redux

Og Redux-verktøysettet:

npm installer @reduxjs/toolkit

Redux Toolkit-biblioteket er også viktig fordi det gjør Redux-butikkkonfigurasjonsprosessen rask og enkel.

Opprette en Redux-butikk

Før du kan begynne å jobbe med Redux-biblioteket, må du opprette en Redux-statusbeholder (eller butikk). Det er nødvendig å opprette en Redux-butikk fordi det er objektet som lagrer den globale Redux-applikasjonstilstanden.

React, som de fleste front-end-rammeverk, har et inngangspunkt i applikasjonene sine, som er en fil eller gruppe filer på toppnivå. De index.html og index.js filer er to filer som er på toppnivået i en React-app, som er over App.js filen og alle komponentene i appen.

Så index.js fil er det ideelle stedet å lage en Redux-butikk.

Oppdaterer 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 bruker fra './reducers/user'
const store = configureStore({
 redusering:{
 bruker
 }
})
ReactDOM.render(




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

Det er mye å pakke ut i koden ovenfor, men det beste stedet å begynne er med configureStore funksjon. Umiddelbart vil du begynne å se fordelene ved å installere Redux Toolkit-biblioteket som configureStore funksjonen oppretter Redux-butikken med bare tre linjer med kode.

React-applikasjonen din ville ikke vite at Redux-butikken eksisterer uten leverandørkomponent, som kommer fra React-Redux-bindingsbiblioteket. Leverandørkomponenten tar en enkelt rekvisitt (butikken) og vikler seg rundt React-appen, noe som gjør Redux-butikken globalt tilgjengelig.

Den tredje og siste nye importen i index.js filen ovenfor er brukerredusering, som er svært viktig for driften av din Redux-butikk.

Hvorfor er en reduksjonsanordning viktig?

Hensikten med en redusering er å endre en UI-komponenttilstand basert på en utført handling. Hvis du for eksempel oppretter en nettbasert skoleapplikasjon, krever du at hver bruker logger på applikasjonen for å få tilgang ved hjelp av en påloggingskomponent. En annen flott komponent for denne applikasjonen er en aktiv brukerkomponent, som viser hver brukers navn eller e-postadresse når de logger på applikasjonen din.

I eksemplet ovenfor vil den aktive brukerkomponenten endres hver gang en bruker utfører handlingen med å logge på kontoen sin. Dette eksemplet er derfor en ideell situasjon for en redusering. Det er også viktig å huske at en redusering kun kan utføre sin funksjon på grunn av Redux butikk som gir den tilgang til tilstanden til enhver komponent og handlingen den trenger for å utføre sin plikter.

Opprette brukerredusering

importer { createSlice } fra "@reduxjs/toolkit";
export const userSlice = createSlice({
 navn: "bruker",
 initialState: { verdi: {email: ""}},
 reduksjonsmidler: {
 pålogging: (tilstand, handling) => {
 state.value = handling.nyttelast
 },
 }
})
eksport const {login} = userSlice.actions
eksport standard userSlice.reducer;

Innenfor Reacts srckatalog du kan lage en reduseringskatalog, det er der du vil lagre din brukerredusering og enhver annen redusering du vil legge til i Redux-butikken din. De user.js filen ovenfor importerer lage Slice funksjon fra Redux Toolkit.

De lage Slice funksjon aksepterer en Navn, en opprinnelige tilstand, og en reduksjonsobjekt som lagrer flere reduksjonsfunksjoner. Imidlertid har reduksjonsobjektet ovenfor bare én reduksjonsfunksjon kalt Logg Inn som tar en tilstand og en handling som argumenter og returnerer en ny tilstand.

User.js-filen eksporterer påloggingsreduksjonen. Påloggingskomponenten importerer den og bruker den i useDispatch() krok.

Opprette påloggingskomponenten

import Reager fra 'reager';
importer lenke fra '@mui/material/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 Signin() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 utsendelse (pålogging({email: email}))
 }
komme tilbake (


sx={{
min: 8,
display: 'flex',
flexDirection: 'kolonne',
alignItems: 'center',
}}>
 Logg inn 
label="E-postadresse"
nødvendig
id="e-post"
name="e-post"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Passord"
nødvendig
id="passord"
name="passord"
type="passord"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
glem passord?

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





);
}
eksport standard pålogging;

Påloggingskomponenten ovenfor bruker MUI-biblioteket. Den lager et enkelt påloggingsskjema som krever en brukers e-post og passord. Ved å klikke på påloggingsknappen utløses en onClick-funksjonen, som vil kalle handleSend inn funksjon.

De handleSend inn funksjonen bruker useState() og useDispact() kroker sammen med påloggingsredusering for å gjøre en aktiv brukers e-postadresse tilgjengelig i Redux-butikken. Fra Redux-butikken har hver komponent i React-appen nå tilgang til en aktiv brukers e-post.

I slekt: Hooks: The Hero of React Følgende aktive brukerkomponent henter en aktiv brukers e-postadresse ved hjelp av useSelector() krok og gjengir den til app-grensesnittet.

ActiveUser.js-filen

import Reager fra "reagere";
importer { useSelector } fra "react-redux";
function ActiveUsers() {
 const bruker = useSelector((stat) => state.user.value)
 komme tilbake (


Aktive brukere

 {user.email} 




 );
}

Den oppdaterte App.js-filen

Ta en titt på denne koden:

import Reager fra "reagere"; importer ActiveUsers fra "./components/ActiveUsers"; importer pålogging fra "./components/Signin";
funksjon App() {
komme tilbake ( 
);
}
eksport standard app; 

De App.js filen ovenfor gjengir både de aktive brukerne og påloggingskomponentene i React-applikasjonen og skaper følgende utdata i nettleseren din:

Hvis en bruker logger på applikasjonen, vil den aktive brukerkomponenten umiddelbart oppdateres med en ny aktiv bruker-e-post.

Det oppdaterte brukergrensesnittet

Når bør du bruke Redux?

Redux er et av de mest populære statsadministrasjonsbibliotekene, hovedsakelig fordi det gjør en utmerket jobb med å lage forutsigbar og pålitelig kode. Hvis mange komponenter i en applikasjon bruker samme applikasjonstilstand, er Redux det ideelle valget.

Ved å bruke skoleeksemplet ovenfor, påloggingskomponenten, aktiv brukerkomponent, klassedeltaker komponent, og til og med en profilkomponent vil trenge en brukers e-postadresse (eller en annen unik identifikator). Dette er grunnen til at Redux er det beste alternativet her.

Imidlertid, hvis du har en tilstand som bare brukes av én eller to komponenter på det meste, kan et bedre alternativ være React-rekvisitter.

Hvordan bruke rekvisitter i ReactJS

Hvis du leter etter tips om hvordan du bruker rekvisitter i ReactJS, er du på rett sted.

Les Neste

Om forfatteren