Kas yra React Redux ir kaip jį naudoti?

„Redux“ yra nemokama būsenos valdymo biblioteka, veikianti „JavaScript“ programų priekinėje dalyje, valdanti kiekvieno vartotojo sąsajos komponento būseną. „Redux“ biblioteka palengvina kodo, kuris valdo ir saugo duomenis programoje, ir kodo, valdančio įvykius ir jų poveikį įvairiems programos vartotojo sąsajos komponentams, atskyrimą.

Vienas iš pagrindinių Redux pardavimo taškų yra tai, kad jis yra lankstus. Galite naudoti „Redux“ su beveik bet kokia „JavaScript“ sistema ar biblioteka.

„Redux“ komanda sukūrė tris bibliotekas, būtent „Redux“, „React-Redux“ ir „Redux Toolkit“. Visos trys bibliotekos dirba kartu, kad suteiktų kuo daugiau naudos iš „React“ kūrimo patirties, todėl šiame mokymo straipsnyje sužinosite, kaip jomis naudotis.

React-Redux svarba

Nors „Redux“ yra nepriklausoma būsenos valdymo biblioteka, norint ją naudoti su bet kokia sąsaja ar biblioteka, reikalinga vartotojo sąsajos biblioteka. UI susiejimo biblioteka tvarko būsenos konteinerio (arba saugyklos) sąveikos logiką, kuri yra iš anksto nustatytų veiksmų rinkinys, jungiantis sąsajos sistemą su Redux biblioteka.

„React-Redux“ yra oficiali „React“ programų „Redux UI“ susiejimo biblioteka, kurią prižiūri „Redux“ komanda.

Susijęs: Kaip sukurti savo pirmosios reakcijos programą naudojant „JavaScript“.

„Redux“ diegimas jūsų projekto kataloge

Yra du būdai, kaip gauti prieigą prie „React“ programos „Redux“ bibliotekos. „Redux“ komandos rekomenduojamas būdas yra naudoti šią komandą kuriant naują „React“ projektą:

npx Create-React-app my-app --template redux

Aukščiau pateikta komanda automatiškai sukonfigūruoja „Redux Toolkit“, „React-Redux“ ir „Redux“ parduotuvę. Tačiau, jei norite naudoti Redux esamame React projekte, galite tiesiog įdiegti Redux biblioteką kaip priklausomybę naudodami šią komandą:

npm įdiegti redux

Po to seka „React-Redux“ įrišimo vartotojo sąsajos biblioteka:

npm įdiegti react-redux

Ir „Redux“ įrankių rinkinys:

npm įdiegti @reduxjs/toolkit

„Redux Toolkit“ biblioteka taip pat svarbi, nes leidžia greitai ir lengvai „Redux“ parduotuvės konfigūravimo procesą.

„Redux“ parduotuvės kūrimas

Prieš pradėdami dirbti su „Redux“ biblioteka, turėsite sukurti „Redux“ būsenos konteinerį (arba saugyklą). Sukurti „Redux“ parduotuvę būtina, nes tai yra objektas, kuriame saugoma visuotinė „Redux“ programos būsena.

„React“, kaip ir dauguma priekinių sistemų, programose turi įėjimo tašką, kuris yra failas arba failų grupė aukščiausio lygio. The index.html ir index.js failai yra du failai, esantys aukščiausiame „React“ programos lygyje, kuris yra aukščiau App.js failą ir visus programos komponentus.

Taigi index.js failas yra ideali vieta „Redux“ parduotuvei sukurti.

Index.js atnaujinimas naudojant „Redux Store“.

importuoti React iš „reaguoti“
importuoti ReactDOM iš „react-dom“
importuoti programą iš „./App“
importuoti reportWebVitals iš „./reportWebVitals“
importuoti {configureStore} iš „@reduxjs/toolkit“
importuoti { Teikėjas } iš „react-redux“
importuoti vartotoją iš „./reducers/user“
const store = configureStore({
 reduktorius:{
 Vartotojas
 }
})
ReactDOM.render(




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

Aukščiau pateiktame kode yra daug ką išpakuoti, bet geriausia vieta pradėti nuo configureStore funkcija. Iš karto pamatysite „Redux Toolkit“ bibliotekos diegimo pranašumus kaip configureStore funkcija sukuria Redux parduotuvę tik su trimis kodo eilutėmis.

Jūsų „React“ programa nežinotų, kad „Redux“ parduotuvė egzistuoja be teikėjo komponentas, kuri gaunama iš React-Redux įrišimo bibliotekos. Teikėjo komponentas paima vieną rekvizitą (parduotuvę) ir apgaubia „React“ programą, todėl „Redux“ parduotuvė tampa prieinama visame pasaulyje.

Trečias ir paskutinis naujas importas index.js aukščiau esantis failas yra vartotojo reduktorius, kuris yra gyvybiškai svarbus jūsų Redux parduotuvės veikimui.

Kodėl reduktorius yra svarbus?

Reduktoriaus paskirtis – pakeisti a UI komponento būsena remiantis a atliktas veiksmas. Pavyzdžiui, jei kuriate internetinę mokyklos programą, kiekvienas vartotojas turi prisijungti prie programos, kad gautų prieigą naudodamas prisijungimo komponentą. Kitas puikus šios programos komponentas yra aktyvus vartotojo komponentas, kuris rodys kiekvieno vartotojo vardą arba el. pašto adresą, kai jis prisijungs prie jūsų programos.

Aukščiau pateiktame pavyzdyje aktyvus vartotojo komponentas pasikeis kiekvieną kartą, kai vartotojas prisijungs prie savo paskyros. Todėl šis pavyzdys yra ideali situacija reduktoriui. Taip pat svarbu atsiminti, kad reduktorius savo funkciją gali atlikti tik dėl Redux parduotuvę, kuri suteikia prieigą prie bet kurio komponento būsenos ir veiksmo, kurio reikia jam atlikti pareigas.

Vartotojo reduktoriaus kūrimas

importuoti { CreateSlice } iš "@reduxjs/toolkit";
export const userSlice = createSlice({
 vardas: "vartotojas",
 pradinė būsena: { vertė: {el. paštas: ""}},
 reduktoriai: {
 prisijungimas: (būsena, veiksmas) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
eksportuoti numatytąjį userSlice.reducer;

„React“ viduje srckatalogas galite sukurti a reduktoriaus katalogas, kur laikysite savo vartotojo reduktorius ir bet koks kitas reduktorius, kurį norite pridėti prie savo Redux parduotuvės. The user.js aukščiau esantis failas importuoja sukurti Slice funkcija iš Redux Toolkit.

The sukurti Slice funkcija priima a vardas, an pradinė būsena, ir a reduktoriaus objektas kuriame saugomos kelios reduktoriaus funkcijos. Tačiau aukščiau pateiktas reduktorių objektas turi tik vieną reduktoriaus funkciją, vadinamą Prisijungti kuri priima būseną ir veiksmą kaip argumentus ir grąžina naują būseną.

Failas user.js eksportuoja prisijungimo reduktorių. Prisijungimo komponentas jį importuoja ir naudoja useDispatch() kabliukas.

Prisijungimo komponento kūrimas

importuoti React iš 'react';
importuoti nuorodą iš '@mui/material/Link';
importuoti teksto lauką iš '@mui/material/TextField';
importuoti tipografiją iš '@mui/material/Typography';
importuoti { Button, Box } iš '@mui/material';
importuoti { useDispatch } iš 'react-redux';
importuoti { login } iš '../reducers/user';
importuoti { useState } iš 'react';
function Signin() {
 const dispatch = useDispatch()
 const [el. paštas, setEmail] = useState('')
 const handleSubmit = () => {
 išsiuntimas (prisijungti ({el. paštas: el. paštas}))
 }
grįžti (


sx={{
mano: 8,
ekranas: „flex“,
flexDirection: „stulpelis“,
alignItems: "centras",
}}>
 Prisijungti 
label="El. pašto adresas"
reikalaujama
id="el.paštas"
name="el.paštas"
paraštė = "normalus"
onChange={(e) => setEmail (e.target.value)}
/>
etiketė="slaptažodis"
reikalaujama
id="slaptažodis"
vardas = slaptažodis
type="slaptažodis"
paraštė = "normalus"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
pamiršti slaptažodį?

variantas = "sudėtyje"
sx={{mt: 2}}
onClick={handleSubmit}
>
Prisijungti





);
}
eksportuoti numatytąjį prisijungimą;

Naudojamas anksčiau nurodytas prisijungimo komponentas MUI biblioteka. Sukuriama paprasta prisijungimo forma, kuriai reikalingas vartotojo el. paštas ir slaptažodis. Spustelėjus prisijungimo mygtuką, bus suaktyvintas onClick funkcija, kuri vadinsis rankenaPateikti funkcija.

The rankenaPateikti funkcija naudoja useState() ir useDispact() kabliukai kartu su prisijungimo reduktorius kad aktyvaus vartotojo el. pašto adresas būtų pasiekiamas Redux parduotuvėje. Iš „Redux“ parduotuvės kiekvienas „React“ programos komponentas dabar turi prieigą prie aktyvaus vartotojo el.

Susijęs: Kabliukai: Reagavimo herojus Šis aktyvaus vartotojo komponentas nuskaito aktyvaus vartotojo el. pašto adresą naudodamas useSelector() kabliukas ir pateikia jį programos vartotojo sąsajai.

ActiveUser.js failas

importuoti React iš "reaguoti";
importuoti { useSelector } iš "react-redux";
function ActiveUsers() {
 const user = useSelector((būsena) => state.user.value)
 grįžti (


Aktyvūs vartotojai

 {user.email} 




 );
}

Atnaujintas App.js failas

Pažvelkite į šią kodo dalį:

importuoti React iš "reaguoti"; importuoti ActiveUsers iš "./components/ActiveUsers"; importuoti prisijungimą iš „./components/Signin“;
function App() {
grįžti ( 
);
}
eksportuoti numatytąją programą; 

The App.js Aukščiau esantis failas pateikia ir aktyvius naudotojus, ir prisijungimo komponentus jūsų „React“ programoje, sukurdamas šią išvestį jūsų naršyklėje:

Jei vartotojas prisijungia prie programos, aktyvių vartotojų komponentas nedelsiant bus atnaujintas nauju aktyvaus vartotojo el. pašto adresu.

Atnaujinta vartotojo sąsaja

Kada turėtumėte naudoti Redux?

Redux yra viena iš populiariausių valstybės valdymo bibliotekų, daugiausia dėl to, kad ji puikiai atlieka nuspėjamą ir patikimą kodą. Jei daugelis programos komponentų naudoja tą pačią programos būseną, Redux yra idealus pasirinkimas.

Naudojant anksčiau pateiktą mokyklos pavyzdį, prisijungimo komponentas, aktyvus vartotojo komponentas, klasės dalyvis komponentas ir netgi profilio komponentui reikės vartotojo el. pašto adreso (arba kito unikalaus identifikatorius). Štai kodėl „Redux“ yra geriausias pasirinkimas.

Tačiau jei turite būseną, kurią naudoja daugiausia vienas ar du komponentai, geresnis pasirinkimas gali būti „React“ rekvizitai.

Kaip naudoti rekvizitus „ReactJS“.

Jei ieškote patarimų, kaip naudoti rekvizitus ReactJS, esate tinkamoje vietoje.

Skaitykite toliau

Apie autorių