Kas ir React Redux un kā to izmantot?

Redux ir bezmaksas stāvokļa pārvaldības bibliotēka, kas darbojas JavaScript lietojumprogrammu priekšgalā, pārvaldot katra lietotāja saskarnes komponenta stāvokli. Redux bibliotēka atvieglo atdalīšanu starp kodu, kas pārvalda un saglabā datus lietojumprogrammā, un kodu, kas pārvalda notikumus un to ietekmi uz dažādiem lietojumprogrammas lietotāja interfeisa komponentiem.

Viens no galvenajiem Redux pārdošanas punktiem ir tas, ka tas ir elastīgs. Varat izmantot Redux ar gandrīz jebkuru JavaScript ietvaru vai bibliotēku.

Redux komanda ir izveidojusi trīs bibliotēkas, proti, Redux, React-Redux un Redux Toolkit. Visas trīs bibliotēkas strādā kopā, lai sniegtu jums maksimālu labumu no jūsu React izstrādes pieredzes, un šajā mācību rakstā jūs uzzināsit, kā tās izmantot.

React-Redux nozīme

Lai gan Redux ir neatkarīga stāvokļa pārvaldības bibliotēka, lai to izmantotu ar jebkuru priekšgala sistēmu vai bibliotēku, ir nepieciešama lietotāja saskarnes saistošā bibliotēka. UI saistīšanas bibliotēka apstrādā stāvokļa konteinera (vai veikala) mijiedarbības loģiku, kas ir iepriekš definētu darbību kopa, kas savieno priekšgala ietvaru ar Redux bibliotēku.

React-Redux ir oficiālā Redux UI saistošā bibliotēka React lietojumprogrammām, un to uztur Redux komanda.

Saistīts: Kā izveidot savu pirmo reakcijas lietotni, izmantojot JavaScript

Redux instalēšana jūsu projektu direktorijā

Ir divi veidi, kā piekļūt Redux bibliotēkai jūsu React lietojumprogrammā. Redux komandas ieteicamā pieeja ir izmantot šādu komandu, veidojot jaunu React projektu:

npx izveidot-reaģēt-lietotne mana lietotne -- veidne redux

Iepriekš minētā komanda automātiski konfigurē Redux Toolkit, React-Redux un Redux veikalu. Tomēr, ja vēlaties izmantot Redux esošajā React projektā, varat vienkārši instalēt Redux bibliotēku kā atkarību ar šādu komandu:

npm instalēt redux

Tam seko React-Redux saistošā lietotāja interfeisa bibliotēka:

npm instalējiet react-redux

Un Redux rīku komplekts:

npm instalējiet @reduxjs/rīkkopa

Redux Toolkit bibliotēka ir arī svarīga, jo tā padara Redux veikala konfigurēšanas procesu ātru un vienkāršu.

Redux veikala izveide

Lai varētu sākt strādāt ar Redux bibliotēku, jums ir jāizveido Redux stāvokļa konteiners (vai veikals). Redux veikala izveide ir nepieciešama, jo tas ir objekts, kas saglabā globālo Redux lietojumprogrammas stāvokli.

React, tāpat kā lielākajai daļai priekšgala sistēmu, lietojumprogrammās ir ieejas punkts, kas ir fails vai failu grupa augšējā līmenī. The index.html un index.js faili ir divi faili, kas atrodas React lietotnes augšējā līmenī, kas atrodas virs App.js failu un visus lietotnes komponentus.

Tātad, index.js fails ir ideāla vieta Redux veikala izveidei.

Index.js atjaunināšana, izmantojot Redux veikalu

importēt React no 'react'
importēt ReactDOM no 'react-dom'
importēt lietotni no './App'
importēt ziņojumu WebVitals no "./reportWebVitals"
importēt {configureStore} no "@reduxjs/toolkit"
importēt { Provider } no 'react-redux'
importēt lietotāju no './reducers/user'
const store = configureStore({
 reduktors:{
 lietotājs
 }
})
ReactDOM.render(




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

Iepriekš minētajā kodā ir daudz ko izpakot, taču vislabāk ir sākt ar configureStore funkcija. Tūlīt jūs redzēsit Redux Toolkit bibliotēkas instalēšanas priekšrocības kā configureStore funkcija izveido Redux veikalu tikai ar trim koda rindām.

Jūsu React lietojumprogramma nezinātu, ka Redux veikals pastāv bez nodrošinātāja komponents, kas nāk no React-Redux saistošās bibliotēkas. Pakalpojumu sniedzēja komponents izmanto vienu rekvizītu (veikalu) un aptin sevi ap React lietotni, padarot Redux veikalu pieejamu globāli.

Trešais un pēdējais jaunais imports index.js augšējais fails ir lietotāja reduktors, kas ir ļoti svarīgi jūsu Redux veikala darbībai.

Kāpēc reduktors ir svarīgs?

Reduktora mērķis ir mainīt a UI komponenta stāvoklis pamatojoties uz a veikta darbība. Piemēram, ja veidojat tiešsaistes skolas lietojumprogrammu, katram lietotājam būs jāpierakstās lietojumprogrammā, lai iegūtu piekļuvi, izmantojot pierakstīšanās komponentu. Vēl viens lielisks šīs lietojumprogrammas komponents ir aktīvs lietotāja komponents, kas parādīs katra lietotāja vārdu vai e-pasta adresi, kad viņš pierakstīsies jūsu lietojumprogrammā.

Iepriekš minētajā piemērā aktīvais lietotāja komponents mainīsies katru reizi, kad lietotājs veiks darbību, pierakstoties savā kontā. Tāpēc šis piemērs ir ideāla situācija reduktoram. Ir arī svarīgi atcerēties, ka reduktors var veikt savu funkciju tikai Redux dēļ veikals, kas nodrošina piekļuvi jebkura komponenta stāvoklim un darbībai, kas tai nepieciešama tā veikšanai pienākumus.

Lietotāja reducētāja izveide

importēt { CreateSlice } no "@reduxjs/toolkit";
eksportēt const userSlice = createSlice({
 nosaukums: "lietotājs",
 sākotnējāState: { value: {email: ""}},
 reduktori: {
 pieteikšanās: (stāvoklis, darbība) => {
 state.value = action.payload
 },
 }
})
eksportēt const {login} = userSlice.actions
eksportēt noklusējuma userSlice.reducer;

React ietvaros srcdirektoriju jūs varat izveidot a reduktora direktorijs, kur jūs glabāsit savu lietotāja reduktors un jebkurš cits reduktors, kuru vēlaties pievienot savam Redux veikalam. The user.js iepriekš esošais fails importē izveidot Šķēli funkciju no Redux Toolkit.

The izveidot Šķēli funkcija pieņem a nosaukums, an sākotnējais stāvoklisun a reduktora objekts kas saglabā vairākas reduktora funkcijas. Tomēr iepriekš minētajam reduktora objektam ir tikai viena reduktora funkcija Pieslēgties kas uztver stāvokli un darbību kā argumentus un atgriež jaunu stāvokli.

Fails user.js eksportē pieteikšanās samazinātāju. Pierakstīšanās komponents to importē un izmanto pakalpojumā useDispatch() āķis.

Pierakstīšanās komponenta izveide

importēt React no 'react';
importēt saiti no '@mui/material/Link';
importēt teksta lauku no '@mui/material/TextField';
importēt tipogrāfiju no '@mui/material/Typography';
importēt { Button, Box } no '@mui/material';
importēt { useDispatch} no 'react-redux';
importēt { login } no '../reducers/user';
importēt { useState } no 'react';
function Signin() {
 const dispatch = useDispatch()
 const [e-pasts, setEmail] = useState('')
 const handleSubmit = () => {
 nosūtīšana (pieteikšanās({email: email}))
 }
atgriezties (


sx={{
mans: 8,
displejs: "flex",
flexDirection: 'kolonna',
alignItems: "centrs",
}}>
 Ielogoties 
label="E-pasta adrese"
nepieciešams
id="e-pasts"
name = "e-pasts"
margin = "normāls"
onChange={(e) => setEmail (e.target.value)}
/>
etiķete = "Parole"
nepieciešams
id="parole"
name = "parole"
tips = "parole"
margin = "normāls"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
aizmirst paroli?

variants="satur"
sx={{mt: 2}}
onClick={handleSubmit}
>
Ielogoties





);
}
eksportēt noklusējuma pierakstīšanos;

Tiek izmantots iepriekš minētais pierakstīšanās komponents MUI bibliotēka. Tas izveido vienkāršu pierakstīšanās veidlapu, kurai nepieciešams lietotāja e-pasts un parole. Noklikšķinot uz pierakstīšanās pogas, tiks aktivizēts onClick funkcija, kas izsauks rokturisIesniegt funkcija.

The rokturisIesniegt funkcija izmanto useState() un useDispact() āķi kopā ar pieteikšanās reduktors lai Redux veikalā būtu pieejama aktīva lietotāja e-pasta adrese. Redux veikalā katram React lietotnes komponentam tagad ir piekļuve aktīva lietotāja e-pastam.

Saistīts: Āķi: reakcijas varonis Šis aktīvā lietotāja komponents izgūst aktīvā lietotāja e-pasta adresi, izmantojot useSelector() āķis un atveido to lietotnes lietotāja saskarnē.

Fails ActiveUser.js

importēt React no "reaģēt";
importēt { useSelector } no "react-redux";
function ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 atgriezties (


Aktīvie lietotāji

 {user.email} 




 );
}

Atjaunināts App.js fails

Apskatiet šo koda daļu:

importēt React no "reaģēt"; importēt ActiveUsers no "./components/ActiveUsers"; importēt pierakstīšanos no "./components/Signin";
function App() {
atgriezties ( 
);
}
eksportēt noklusējuma lietotni; 

The App.js iepriekš esošais fails atveido gan aktīvos lietotājus, gan pierakstīšanās komponentus jūsu React lietojumprogrammā, izveidojot šādu izvadi jūsu pārlūkprogrammā:

Ja lietotājs pierakstās lietojumprogrammā, aktīvo lietotāju komponents nekavējoties tiks atjaunināts ar jaunu aktīvā lietotāja e-pastu.

Atjauninātā lietotāja saskarne

Kad jums vajadzētu izmantot Redux?

Redux ir viena no populārākajām valsts pārvaldības bibliotēkām, galvenokārt tāpēc, ka tā veic teicamu darbu, veidojot paredzamu un uzticamu kodu. Ja daudzi lietojumprogrammas komponenti izmanto vienu un to pašu lietojumprogrammas stāvokli, Redux ir ideāla izvēle.

Izmantojot iepriekš minēto skolas piemēru, pierakstīšanās komponents, aktīvais lietotāja komponents, klases dalībnieks komponents, un pat profila komponentam būs nepieciešama lietotāja e-pasta adrese (vai kāda cita unikāla identifikators). Tāpēc Redux šeit ir labākais risinājums.

Tomēr, ja jums ir stāvoklis, ko izmanto tikai viens vai divi komponenti, labāks risinājums varētu būt React rekvizīti.

Kā lietot rekvizītus programmā ReactJS

Ja meklējat padomus par rekvizītu izmantošanu programmā ReactJS, jūs esat īstajā vietā.

Lasiet Tālāk

Par autoru