Što je React Redux i kako ga koristite?

Redux je besplatna knjižnica za upravljanje stanjem koja radi na prednjem dijelu JavaScript aplikacija, upravljajući stanjem svake komponente unutar korisničkog sučelja. Biblioteka Redux olakšava razdvajanje između koda koji upravlja i pohranjuje podatke u aplikaciji i koda koji upravlja događajima i njihovim učincima na različite komponente korisničkog sučelja aplikacije.

Jedna od glavnih prodajnih točaka Reduxa je da je fleksibilan. Redux možete koristiti s gotovo bilo kojim JavaScript okvirom ili bibliotekom.

Redux tim je stvorio tri biblioteke, a to su Redux, React-Redux i Redux Toolkit. Sve tri knjižnice rade zajedno kako bi vam pružile maksimum iz vašeg iskustva razvoja Reacta, a u ovom ćete članku vodiča naučiti kako ih koristiti.

Važnost React-Reduxa

Iako je Redux neovisna knjižnica za upravljanje stanjem, korištenje s bilo kojim prednjim okvirom ili knjižnicom zahtijeva UI binding biblioteku. Knjižnica povezivanja korisničkog sučelja upravlja logikom interakcije spremnika stanja (ili trgovine), koja je skup unaprijed definiranih koraka koji povezuje front-end okvir s Redux bibliotekom.

React-Redux je službena Redux UI binding biblioteka za React aplikacije, a održava je Redux tim.

Povezano: Kako stvoriti svoju prvu React aplikaciju s JavaScriptom

Instaliranje Reduxa u vaš projektni direktorij

Postoje dva načina za pristup Redux biblioteci u vašoj React aplikaciji. Preporučeni pristup Redux tima je korištenje sljedeće naredbe prilikom izrade novog React projekta:

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

Gornja naredba automatski konfigurira Redux Toolkit, React-Redux i Redux store. Međutim, ako želite koristiti Redux u postojećem React projektu, tada možete jednostavno instalirati Redux biblioteku kao ovisnost sa sljedećom naredbom:

npm install redux

Slijedi React-Redux binding UI biblioteka:

npm install react-redux

I Redux alata:

npm install @reduxjs/toolkit

Biblioteka Redux Toolkit-a također je važna jer čini proces konfiguracije Redux trgovine brzim i lakim.

Izrada Redux trgovine

Prije nego što počnete raditi s bibliotekom Redux, morat ćete stvoriti spremnik (ili pohranu) Redux stanja. Stvaranje Redux trgovine je neophodno jer je to objekt koji pohranjuje globalno stanje Redux aplikacije.

React, kao i većina front-end okvira, ima ulaznu točku u svojim aplikacijama, a to je datoteka ili grupa datoteka na najvišoj razini. The index.html i index.js datoteke su dvije datoteke koje se nalaze na najvišoj razini React aplikacije, koja je iznad App.js datoteku i sve komponente u aplikaciji.

Dakle, index.js datoteka je idealno mjesto za stvaranje Redux trgovine.

Ažuriranje index.js s Redux Store-om

import React iz 'react'
uvoz ReactDOM iz 'react-dom'
uvoz aplikacije iz './App'
uvoz reportWebVitals iz "./reportWebVitals"
uvoz {configureStore} iz "@reduxjs/toolkit"
import { Provider } iz 'react-redux'
uvoz korisnika iz './reducers/user'
const store = configureStore({
 reduktor:{
 korisnik
 }
})
ReactDOM.render(




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

U gornjem kodu ima puno toga za raspakirati, ali najbolje mjesto za početak je s configureStore funkcija. Odmah ćete početi uviđati prednosti instalacije Redux Toolkit biblioteke kao configureStore funkcija stvara Redux trgovinu sa samo tri retka koda.

Vaša React aplikacija ne bi znala da Redux trgovina postoji bez komponenta dobavljača, koji dolazi iz React-Redux binding biblioteke. Komponenta dobavljača uzima jedan rekvizit (trgovinu) i omotava se oko React aplikacije, čineći Redux trgovinu globalno dostupnom.

Treći i posljednji novi uvoz u index.js datoteka iznad je korisnički reduktor, što je od vitalnog značaja za rad vaše Redux trgovine.

Zašto je reduktor važan?

Svrha reduktora je promijeniti a Stanje komponente korisničkog sučelja na temelju a izvršena radnja. Na primjer, ako izrađujete školsku aplikaciju na mreži, morat ćete od svakog korisnika tražiti da se prijavi u aplikaciju kako bi dobio pristup pomoću komponente za prijavu. Još jedna sjajna komponenta za ovu aplikaciju je aktivna korisnička komponenta, koja će prikazati ime ili adresu e-pošte svakog korisnika kada se prijave u vašu aplikaciju.

U gornjem primjeru, aktivna korisnička komponenta će se promijeniti svaki put kada korisnik izvrši radnju prijave na svoj račun. Ovaj primjer je, dakle, idealna situacija za reduktor. Također je važno zapamtiti da reduktor može obavljati svoju funkciju samo zbog Reduxa pohranu koja mu daje pristup stanju bilo koje komponente i radnji koju treba da izvrši dužnosti.

Izrada User Reducer

import { createSlice } iz "@reduxjs/toolkit";
izvoz const userSlice = createSlice({
 ime: "korisnik",
 initialState: { vrijednost: {email: ""}},
 reduktori: {
 prijava: (stanje, radnja) => {
 stanje.vrijednost = akcija.korisno opterećenje
 },
 }
})
export const {login} = userSlice.actions
izvoz zadanog userSlice.reducer;

Unutar React-a srcimenik možete stvoriti a direktorij reduktora, gdje ćete pohraniti svoje korisnički reduktor i bilo koji drugi reduktor koji želite dodati u svoju Redux trgovinu. The user.js gornja datoteka uvozi createSlice funkciju iz Redux Toolkita.

The createSlice funkcija prihvaća a Ime, an početno stanje, i a objekt reduktora koji pohranjuje više funkcija reduktora. Međutim, gornji objekt reduktora ima samo jednu zvanu funkciju reduktora prijaviti se koji uzima stanje i akciju kao argumente i vraća novo stanje.

Datoteka user.js izvozi reduktor prijave. Komponenta za prijavu ga uvozi i koristi u useDispatch() kuka.

Stvaranje komponente za prijavu

import React from 'react';
uvoz veze iz '@mui/material/Link';
uvoz TextField iz '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } iz '@mui/material';
import { useDispatch } iz 'react-redux';
import { login } iz '../reducers/user';
import { useState } iz 'react';
funkcija Prijava() {
 const dispatch = useDispatch()
 const [e-pošta, setEmail] = useState('')
 const handleSubmit = () => {
 otprema (prijava ({email: email}))
 }
vratiti (


sx={{
moj: 8,
zaslon: 'flex',
flexDirection: 'stupac',
alignItems: 'centar',
}}>
 Prijaviti se 
label="e-mail adresa"
potreban
id="e-pošta"
ime="e-pošta"
margin="normalno"
onChange={(e) => setEmail (e.target.value)}
/>
label="Lozinka"
potreban
id="lozinka"
ime="lozinka"
type="password"
margin="normalno"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Zaboravili ste lozinku?

varijanta="sadržana"
sx={{mt: 2}}
onClick={handleSubmit}
>
Prijaviti se





);
}
izvoz zadana prijava;

Koristi se gornja komponenta za prijavu biblioteku MUI. Stvara jednostavan obrazac za prijavu koji zahtijeva korisničku e-poštu i lozinku. Klikom na gumb za prijavu pokrenut će se onClick funkcija, koji će nazvati handleSubmit funkcija.

The handleSubmit funkcija koristi useState() i useDispact() kuke zajedno sa reduktor prijave kako bi e-mail adresa aktivnog korisnika bila dostupna u Redux trgovini. Iz Redux trgovine, svaka komponenta u aplikaciji React sada ima pristup e-pošti aktivnog korisnika.

Povezano: Hooks: Heroj Reacta Sljedeća komponenta aktivnog korisnika dohvaća e-mail adresu aktivnog korisnika uz pomoć useSelector() kuka i generira ga korisničkom sučelju aplikacije.

Datoteka ActiveUser.js

import React iz "react";
import { useSelector } iz "react-redux";
funkcija ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 vratiti (


Aktivni korisnici

 {user.email} 




 );
}

Ažurirana datoteka App.js

Pogledajte ovaj dio koda:

import React iz "react"; uvoz ActiveUsers iz "./components/ActiveUsers"; import Signin iz "./components/Signin";
funkcija App() {
vratiti ( 
);
}
izvoz zadane aplikacije; 

The App.js datoteka iznad prikazuje aktivne korisnike i komponente za prijavu u vašoj React aplikaciji stvarajući sljedeći izlaz u vašem pregledniku:

Ako se korisnik prijavi u aplikaciju, komponenta aktivnih korisnika odmah će se ažurirati novom aktivnom korisničkom e-poštom.

Ažurirano korisničko sučelje

Kada trebate koristiti Redux?

Redux je jedna od najpopularnijih knjižnica za upravljanje državom, uglavnom zato što radi izvrstan posao stvaranja predvidljivog i pouzdanog koda. Ako mnoge komponente u aplikaciji koriste isto stanje aplikacije, Redux je idealan izbor.

Koristeći gornji primjer škole, komponentu za prijavu, komponentu aktivnog korisnika, sudionik razreda komponenta, pa čak i komponenta profila trebat će adresu e-pošte korisnika (ili neku drugu jedinstvenu identifikator). Zato je Redux najbolja opcija ovdje.

Međutim, ako imate stanje koje koristi samo jedna ili dvije komponente, onda bi bolja opcija mogla biti React props.

Kako koristiti rekvizite u ReactJS-u

Ako tražite savjete o tome kako koristiti props u ReactJS-u, na pravom ste mjestu.

Pročitajte dalje

O autoru