Kaj je React Redux in kako ga uporabljate?

Redux je brezplačna knjižnica za upravljanje stanja, ki deluje na sprednji strani aplikacij JavaScript in upravlja stanje vsake komponente znotraj uporabniškega vmesnika. Knjižnica Redux omogoča ločevanje med kodo, ki upravlja in shranjuje podatke v aplikaciji, in kodo, ki upravlja dogodke in njihove učinke na različne komponente uporabniškega vmesnika aplikacije.

Ena glavnih prodajnih točk Reduxa je, da je prilagodljiv. Redux lahko uporabljate s skoraj vsakim ogrodjem ali knjižnico JavaScript.

Ekipa Redux je ustvarila tri knjižnice, in sicer Redux, React-Redux in Redux Toolkit. Vse tri knjižnice delujejo skupaj, da vam ponudijo kar največ iz vaše razvojne izkušnje React, in v tem članku vadnice se boste naučili, kako jih uporabljati.

Pomen React-Reduxa

Čeprav je Redux neodvisna knjižnica za upravljanje stanja, je za njeno uporabo s katerim koli sprednjim okvirjem ali knjižnico potrebna knjižnica za vezavo uporabniškega vmesnika. Knjižnica za vezavo uporabniškega vmesnika obravnava logiko interakcije vsebnika stanja (ali shranjevanja), ki je niz vnaprej določenih korakov, ki povezuje sprednji okvir s knjižnico Redux.

React-Redux je uradna knjižnica za zavezovanje uporabniškega vmesnika Redux za aplikacije React, vzdržuje pa jo ekipa Redux.

Povezano: Kako ustvariti svojo prvo aplikacijo React z JavaScript

Namestitev Reduxa v vaš imenik projekta

Obstajata dva načina za dostop do knjižnice Redux v vaši aplikaciji React. Priporočen pristop ekipe Redux je uporaba naslednjega ukaza pri ustvarjanju novega projekta React:

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

Zgornji ukaz samodejno konfigurira Redux Toolkit, React-Redux in Redux store. Če pa želite uporabiti Redux v obstoječem projektu React, lahko preprosto namestite knjižnico Redux kot odvisnost z naslednjim ukazom:

npm namestite redux

Sledi knjižnica uporabniškega vmesnika za vezavo React-Redux:

npm install react-redux

In komplet orodij Redux:

npm install @reduxjs/toolkit

Knjižnica Redux Toolkit je pomembna tudi zato, ker omogoča hiter in enostaven postopek konfiguracije trgovine Redux.

Ustvarjanje trgovine Redux

Preden lahko začnete delati s knjižnico Redux, boste morali ustvariti vsebnik (ali shrambo) stanja Redux. Ustvarjanje skladišča Redux je potrebno, ker je objekt, ki shranjuje globalno stanje aplikacije Redux.

React ima tako kot večina front-end okvirjev v svojih aplikacijah vstopno točko, ki je datoteka ali skupina datotek na najvišji ravni. The index.html in index.js datoteke sta dve datoteki, ki sta na najvišji ravni aplikacije React, ki je nad App.js datoteko in vse komponente v aplikaciji.

Torej index.js datoteka je idealno mesto za ustvarjanje trgovine Redux.

Posodabljanje index.js z Redux Store

uvozi React iz 'react'
uvozi ReactDOM iz 'react-dom'
uvozi aplikacijo iz './App'
uvozite reportWebVitals iz "./reportWebVitals"
uvozi {configureStore} iz »@reduxjs/toolkit«
uvozi { Provider } iz 'react-redux'
uvozi uporabnika iz './reducers/user'
const store = configureStore({
 reduktor:{
 uporabnik
 }
})
ReactDOM.render(




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

V zgornji kodi je za razpakirati veliko stvari, vendar je najbolje začeti z configureStore funkcijo. Takoj boste začeli videti prednosti namestitve knjižnice Redux Toolkit kot configureStore Funkcija ustvari shrambo Redux s samo tremi vrsticami kode.

Vaša aplikacija React ne bi vedela, da trgovina Redux obstaja brez komponenta ponudnika, ki prihaja iz povezovalne knjižnice React-Redux. Komponenta ponudnika vzame en sam rekvizit (trgovino) in se ovije okoli aplikacije React, zaradi česar je trgovina Redux globalno dostopna.

Tretji in zadnji nov uvoz v index.js zgornja datoteka je uporabniški reduktor, ki je ključnega pomena za delovanje vaše trgovine Redux.

Zakaj je reduktor pomemben?

Namen reduktorja je spremeniti a Stanje komponente uporabniškega vmesnika na podlagi a izvedeno dejanje. Če na primer ustvarjate spletno šolsko aplikacijo, boste zahtevali, da se vsak uporabnik prijavi v aplikacijo, da pridobi dostop s komponento za prijavo. Druga odlična komponenta za to aplikacijo je aktivna uporabniška komponenta, ki bo prikazala ime ali e-poštni naslov vsakega uporabnika, ko se prijavi v vašo aplikacijo.

V zgornjem primeru se bo aktivna uporabniška komponenta spremenila vsakič, ko bo uporabnik izvedel dejanje prijave v svoj račun. Ta primer je torej idealna situacija za reduktor. Pomembno si je tudi zapomniti, da reduktor lahko opravlja svojo funkcijo samo zaradi Reduxa shramba, ki mu omogoča dostop do stanja katere koli komponente in dejanja, ki ga potrebuje za izvedbo dolžnosti.

Ustvarjanje reduktorja uporabnikov

uvozi { createSlice } iz "@reduxjs/toolkit";
izvoz const userSlice = createSlice({
 ime: "uporabnik",
 initialState: { value: {email: ""}},
 reduktorji: {
 prijava: (stanje, dejanje) => {
 state.value = action.payload
 },
 }
})
izvoz const {login} = userSlice.actions
izvozi privzeto userSlice.reducer;

Znotraj Reacta srcimenik lahko ustvarite a imenik reduktorja, kamor boste shranili svoje uporabniški reduktor in kateri koli drug reduktor, ki ga želite dodati v svojo trgovino Redux. The uporabnik.js zgornja datoteka uvozi datoteko createSlice funkcijo iz Redux Toolkit.

The createSlice funkcija sprejema a ime, an začetno stanje, in a objekt reduktorja ki shranjuje več funkcij reduktorja. Vendar ima zgornji objekt reduktorjev samo eno imenovano reduktorsko funkcijo Vpiši se ki vzame stanje in dejanje kot argumenta in vrne novo stanje.

Datoteka user.js izvozi reduktor prijave. Komponenta za prijavo ga uvozi in uporabi v useDispatch() kavelj.

Ustvarjanje komponente za prijavo

uvozi React iz 'react';
uvozi povezavo iz '@mui/material/Link';
uvozite TextField iz '@mui/material/TextField';
uvozi tipografijo iz '@mui/material/Typography';
uvozi { Button, Box } iz '@mui/material';
import { useDispatch } iz 'react-redux';
uvozi {login} iz '../reducers/user';
import { useState } iz 'react';
funkcija Signin() {
 const dispatch = useDispatch()
 const [e-pošta, setEmail] = useState('')
 const handleSubmit = () => {
 odprema (prijava ({e-pošta: e-pošta}))
 }
vrnitev (


sx={{
moj: 8,
zaslon: 'flex',
flexDirection: 'stolpec',
alignItems: 'center',
}}>
 Prijava 
label="E-poštni naslov"
zahtevano
id="e-pošta"
ime="e-pošta"
margin="normalno"
onChange={(e) => setEmail (e.target.value)}
/>
label="Geslo"
zahtevano
id="geslo"
ime="geslo"
type="geslo"
margin="normalno"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
pozabi geslo?

varianta="vsebovano"
sx={{mt: 2}}
onClick={handleSubmit}
>
Prijava





);
}
izvoz privzeta prijava;

Zgornja komponenta za prijavo uporablja knjižnico MUI. Ustvari preprost obrazec za prijavo, ki zahteva uporabniški e-poštni naslov in geslo. S klikom na gumb za prijavo se bo sprožilo funkcija onClick, ki bo poklical handleSubmit funkcijo.

The handleSubmit funkcija uporablja useState() in useDispact() kljuke skupaj z reduktor za prijavo da bo e-poštni naslov aktivnega uporabnika na voljo v trgovini Redux. Iz trgovine Redux ima vsaka komponenta v aplikaciji React zdaj dostop do elektronske pošte aktivnega uporabnika.

Povezano: Hooks: Hero of React Naslednja komponenta aktivnega uporabnika pridobi e-poštni naslov aktivnega uporabnika s pomočjo useSelector() kavelj in ga upodablja v uporabniški vmesnik aplikacije.

Datoteka ActiveUser.js

uvozi React iz "react";
import { useSelector } iz "react-redux";
funkcija ActiveUsers() {
 const uporabnik = useSelector((stanje) => stanje.user.value)
 vrnitev (


Aktivni uporabniki

 {user.email} 




 );
}

Posodobljena datoteka App.js

Oglejte si ta del kode:

uvozi React iz "react"; uvozite ActiveUsers iz "./components/ActiveUsers"; uvozi Signin iz "./components/Signin";
funkcija App() {
vrnitev ( 
);
}
izvoz privzete aplikacije; 

The App.js zgornja datoteka upodablja tako aktivne uporabnike kot komponente za prijavo v vaši aplikaciji React, ki v vašem brskalniku ustvari naslednji izhod:

Če se uporabnik prijavi v aplikacijo, se komponenta aktivnih uporabnikov takoj posodobi z novim aktivnim uporabniškim e-poštnim naslovom.

Posodobljeni uporabniški vmesnik

Kdaj uporabiti Redux?

Redux je ena najbolj priljubljenih knjižnic za upravljanje stanja, predvsem zato, ker odlično ustvarja predvidljivo in zanesljivo kodo. Če veliko komponent v aplikaciji uporablja isto stanje aplikacije, je Redux idealna izbira.

Z uporabo zgornjega šolskega primera komponenta za prijavo, komponenta aktivnega uporabnika, udeleženec razreda komponenta in celo komponenta profila bo potrebovala e-poštni naslov uporabnika (ali kakšen drug edinstven identifikator). Zato je Redux najboljša možnost tukaj.

Če pa imate stanje, ki ga uporabljata največ ena ali dve komponenti, so lahko boljša možnost React props.

Kako uporabljati rekvizite v ReactJS

Če iščete nasvete o uporabi rekvizitov v ReactJS, ste na pravem mestu.

Preberite Naprej

O avtorju