Čo je React Redux a ako ho používate?

Redux je bezplatná knižnica na správu stavu, ktorá funguje na front-ende aplikácií JavaScript a spravuje stav každého komponentu v rámci používateľského rozhrania. Knižnica Redux uľahčuje oddelenie medzi kódom, ktorý spravuje a ukladá údaje v aplikácii, a kódom, ktorý spravuje udalosti a ich účinky na rôzne komponenty používateľského rozhrania aplikácie.

Jednou z hlavných predností Reduxu je, že je flexibilný. Redux môžete použiť takmer s akýmkoľvek rámcom alebo knižnicou JavaScriptu.

Tím Redux vytvoril tri knižnice, a to Redux, React-Redux a Redux Toolkit. Všetky tri knižnice spolupracujú, aby vám poskytli maximum zo skúseností s vývojom Reactu, a v tomto článku s návodom sa dozviete, ako ich používať.

Význam React-Redux

Hoci je Redux nezávislá knižnica pre správu stavu, jej použitie s akýmkoľvek front-end rámcom alebo knižnicou vyžaduje knižnicu viazania používateľského rozhrania. Knižnica väzieb používateľského rozhrania spracováva logiku interakcie stavového kontajnera (alebo úložiska), čo je súbor preddefinovaných krokov, ktoré spájajú front-endový rámec s knižnicou Redux.

React-Redux je oficiálna knižnica viazania používateľského rozhrania Redux pre aplikácie React a spravuje ju tím Redux.

Súvisiace: Ako vytvoriť aplikáciu First React pomocou JavaScriptu

Inštalácia Redux do vášho projektového adresára

Existujú dva spôsoby, ako získať prístup ku knižnici Redux vo vašej aplikácii React. Odporúčaný prístup tímu Redux je použiť pri vytváraní nového projektu React nasledujúci príkaz:

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

Vyššie uvedený príkaz automaticky nakonfiguruje Redux Toolkit, React-Redux a Redux store. Ak však chcete použiť Redux v existujúcom projekte React, môžete jednoducho nainštalovať knižnicu Redux ako závislosť pomocou nasledujúceho príkazu:

npm nainštalovať redux

Nasleduje knižnica používateľského rozhrania viazania React-Redux:

npm install reagovat-redux

A súprava nástrojov Redux:

npm install @reduxjs/toolkit

Knižnica Redux Toolkit je tiež dôležitá, pretože umožňuje rýchly a jednoduchý proces konfigurácie obchodu Redux.

Vytvorenie obchodu Redux

Predtým, ako začnete pracovať s knižnicou Redux, budete musieť vytvoriť kontajner stavu Redux (alebo sklad). Vytvorenie obchodu Redux je nevyhnutné, pretože je to objekt, ktorý ukladá globálny stav aplikácie Redux.

React, ako väčšina front-end frameworkov, má vo svojich aplikáciách vstupný bod, ktorým je súbor alebo skupina súborov na najvyššej úrovni. The index.html a index.js súbory sú dva súbory, ktoré sú na najvyššej úrovni aplikácie React, ktorá je nad App.js súbor a všetky súčasti v aplikácii.

Takže index.js súbor je ideálnym miestom na vytvorenie obchodu Redux.

Aktualizácia index.js pomocou obchodu Redux Store

importovať Reagovať z 'reagovať'
importovať ReactDOM z 'react-dom'
importovať aplikáciu z './App'
importovať reportWebVitals z "./reportWebVitals"
importovať {configureStore} z "@reduxjs/toolkit"
import { Provider } z 'react-redux'
importovať používateľa z './reducers/user'
const store = configureStore({
 redukcia:{
 užívateľ
 }
})
ReactDOM.render(




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

Vo vyššie uvedenom kóde je toho veľa na rozbalenie, ale najlepšie je začať s configureStore funkciu. Okamžite začnete vidieť výhody inštalácie knižnice Redux Toolkit configureStore funkcia vytvorí obchod Redux iba s tromi riadkami kódu.

Vaša aplikácia React by nevedela, že obchod Redux existuje bez komponent poskytovateľa, ktorý pochádza z väzbovej knižnice React-Redux. Komponent poskytovateľa má jednu rekvizitu (obchod) a obklopuje sa aplikáciou React, vďaka čomu je obchod Redux globálne prístupný.

Tretí a posledný nový import v index.js súbor vyššie je užívateľský reduktor, ktorá je životne dôležitá pre fungovanie vašej predajne Redux.

Prečo je redukcia dôležitá?

Účelom reduktora je zmeniť a Stav komponentu používateľského rozhrania na základe a vykonaná akcia. Ak napríklad vytvárate online školskú aplikáciu, budete vyžadovať, aby sa každý používateľ prihlásil do aplikácie, aby získal prístup pomocou prihlasovacieho komponentu. Ďalším skvelým komponentom pre túto aplikáciu je aktívny používateľský komponent, ktorý zobrazí meno alebo e-mailovú adresu každého používateľa, keď sa prihlási do vašej aplikácie.

Vo vyššie uvedenom príklade sa aktívny používateľský komponent zmení vždy, keď používateľ vykoná akciu prihlásenia sa do svojho účtu. Tento príklad je preto ideálnou situáciou pre reduktor. Je tiež dôležité si uvedomiť, že reduktor môže vykonávať svoju funkciu iba vďaka Reduxu úložisko, ktoré mu umožňuje prístup k stavu ľubovoľného komponentu a činnosti, ktorú potrebuje na vykonanie povinnosti.

Vytvorenie používateľského reduktora

import { createSlice } z "@reduxjs/toolkit";
export const userSlice = createSlice({
 meno: "používateľ",
 initialState: { value: {e-mail: ""}},
 redukcie: {
 login: (stav, akcia) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
exportovať predvolený userSlice.reducer;

V rámci React's srcadresár môžete vytvoriť a adresár redukcie, kde budete ukladať svoje užívateľský reduktor a akúkoľvek inú redukciu, ktorú chcete pridať do svojho obchodu Redux. The user.js vyššie uvedený súbor importuje súbor createSlice zo sady nástrojov Redux.

The createSlice funkcia akceptuje a názov, an počiatočný stava a objekt redukcie ktorý ukladá viacero funkcií redukcie. Vyššie uvedený objekt redukcie má však len jednu nazývanú funkciu redukcie Prihlásiť sa ktorá berie stav a akciu ako argumenty a vracia nový stav.

Súbor user.js exportuje redukciu prihlásenia. Prihlasovací komponent ho importuje a použije v useDispatch() háčik.

Vytvorenie prihlasovacieho komponentu

import Reagovať z 'reagovať';
importovať odkaz z '@mui/material/Link';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
import { Button, Box } z '@mui/material';
import { useDispatch } z 'react-redux';
import { login } from '../reducers/user';
import { useState } z 'reagovať';
function Signin() {
 const dispatch = useDispatch()
 const [e-mail, setEmail] = useState('')
 const handleSubmit = () => {
 odoslanie (login({email: email}))
 }
vrátiť (


sx={{
moje: 8,
displej: 'flex',
flexDirection: 'stĺpec',
alignItems: 'center',
}}>
 Prihlásiť sa 
label="E-mailová adresa"
požadovaný
id="e-mail"
name="email"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Heslo"
požadovaný
id="heslo"
name="heslo"
type="heslo"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
zabudnuté heslo?

variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Prihlásiť sa





);
}
exportovať predvolené Prihlásenie;

Vyššie uvedený komponent prihlásenia používa knižnica MUI. Vytvára jednoduchý prihlasovací formulár, ktorý vyžaduje e-mail a heslo používateľa. Kliknutím na tlačidlo prihlásenia sa spustí funkcia onClick, ktorý zavolá na zvládnuťOdoslať funkciu.

The zvládnuťOdoslať funkcia využíva useState() a useDispact() háčiky spolu s redukcia prihlasovania na sprístupnenie e-mailovej adresy aktívneho používateľa v obchode Redux. Z obchodu Redux má teraz každý komponent v aplikácii React prístup k e-mailu aktívneho používateľa.

Súvisiace: Hooks: The Hero of React Nasledujúci aktívny používateľský komponent získava e-mailovú adresu aktívneho používateľa pomocou hák useSelector(). a vykreslí ho do používateľského rozhrania aplikácie.

Súbor ActiveUser.js

import Reagovať z "reagovať";
import { useSelector } z "react-redux";
function ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 vrátiť (


Aktívni používatelia

 {user.email} 




 );
}

Aktualizovaný súbor App.js

Pozrite sa na tento kúsok kódu:

import Reagovať z "reagovať"; importovať ActiveUsers z "./components/ActiveUsers"; importovať Prihlásenie z "./components/Signin";
function App() {
vrátiť ( 
);
}
exportovať predvolenú aplikáciu; 

The App.js súbor vyššie vykreslí aktívnych používateľov aj prihlasovacie komponenty vo vašej aplikácii React a vo vašom prehliadači vytvorí nasledujúci výstup:

Ak sa používateľ prihlási do aplikácie, komponent aktívnych používateľov sa okamžite aktualizuje novým e-mailom aktívneho používateľa.

Aktualizované používateľské rozhranie

Kedy by ste mali použiť Redux?

Redux je jednou z najpopulárnejších knižníc správy štátu, najmä preto, že robí vynikajúcu prácu pri vytváraní predvídateľného a spoľahlivého kódu. Ak veľa komponentov v aplikácii používa rovnaký stav aplikácie, Redux je ideálnou voľbou.

Pomocou vyššie uvedeného školského príkladu komponent prihlásenia, komponent aktívneho používateľa, účastník triedy komponent a dokonca aj komponent profilu bude potrebovať e-mailovú adresu používateľa (alebo nejakú inú jedinečnú identifikátor). To je dôvod, prečo je tu Redux najlepšou voľbou.

Ak však máte stav, ktorý používa iba jedna alebo maximálne dve zložky, lepšou možnosťou môžu byť rekvizity React.

Ako používať rekvizity v ReactJS

Ak hľadáte tipy, ako používať rekvizity v ReactJS, ste na správnom mieste.

Prečítajte si ďalej

O autorovi