Mis on React Redux ja kuidas seda kasutada?

Redux on tasuta olekuhalduse teek, mis töötab JavaScripti rakenduste esiotsas, haldades kasutajaliidese iga komponendi olekut. Reduxi teek hõlbustab koodi, mis haldab ja salvestab rakenduses andmeid, ja koodi, mis haldab sündmusi ja nende mõju rakenduse kasutajaliidese erinevatele komponentidele, eraldamist.

Reduxi üks peamisi müügiargumente on selle paindlikkus. Reduxi saate kasutada peaaegu iga JavaScripti raamistiku või teegiga.

Reduxi meeskond on loonud kolm teeki, nimelt Redux, React-Redux ja Redux Toolkit. Kõik kolm teeki töötavad koos, et anda teile Reacti arenduskogemusest maksimum, ja sellest õpetusartiklist saate teada, kuidas neid kasutada.

React-Reduxi tähtsus

Kuigi Redux on iseseisev olekuhalduse teek, nõuab selle kasutamine mis tahes esiotsa raamistiku või teegiga kasutajaliidese sidumise teeki. UI sidumisteek käsitleb olekukonteineri (või poe) interaktsiooniloogikat, mis on etteantud sammude kogum, mis ühendab esiotsa raamistiku Reduxi teegiga.

React-Redux on ametlik Reduxi kasutajaliidese sidumisteek Reacti rakenduste jaoks ja seda haldab Reduxi meeskond.

Seotud: Kuidas luua JavaScriptiga oma esimene reageerimisrakendus

Reduxi installimine oma projektikataloogi

Reacti rakenduses Reduxi teegile juurdepääsu saamiseks on kaks võimalust. Reduxi meeskonna soovitatav lähenemisviis on uue Reacti projekti loomisel kasutada järgmist käsku:

npx loo-reageeri-rakendus minu-rakendus --template redux

Ülaltoodud käsk konfigureerib automaatselt Reduxi tööriistakomplekti, React-Reduxi ja Reduxi poe. Kui aga soovite Reduxi olemasolevas Reacti projektis kasutada, saate Reduxi teegi lihtsalt installida sõltuvusena järgmise käsuga:

npm install redux

Järgneb React-Reduxi siduva kasutajaliidese teek:

npm install react-redux

Ja Reduxi tööriistakomplekt:

npm installi @reduxjs/tööriistakomplekt

Reduxi tööriistakomplekti teek on samuti oluline, kuna see muudab Reduxi poe seadistamise protsessi kiireks ja lihtsaks.

Reduxi poe loomine

Enne Reduxi teegiga töötamist peate looma Reduxi olekukonteineri (või poe). Reduxi poe loomine on vajalik, kuna see on objekt, mis salvestab globaalse Reduxi rakenduse oleku.

Reactil, nagu enamikul esiotsa raamistikel, on rakendustes sisenemispunkt, mis on tipptasemel fail või failide rühm. The index.html ja index.js failid on kaks faili, mis asuvad Reacti rakenduse ülemisel tasemel, mis on ülalpool App.js fail ja kõik rakenduses olevad komponendid.

Seega index.js fail on ideaalne koht Reduxi poe loomiseks.

Index.js värskendamine Reduxi poe abil

import React alates 'react'
import ReactDOM 'react-dom'ist
importige rakendus rakendusest './App'
import reportWebVitals saidilt "./reportWebVitals"
importige {configureStore} saidist "@reduxjs/toolkit"
import { Pakkuja } 'react-redux'ist
importida kasutaja saidilt './reducers/user'
const store = configureStore({
 reduktor:{
 kasutaja
 }
})
ReactDOM.render(




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

Ülaltoodud koodis on palju lahtipakkimist, kuid parim koht alustamiseks on configureStore funktsiooni. Kohe hakkate nägema Reduxi tööriistakomplekti teegi installimise eeliseid configureStore funktsioon loob Reduxi poe vaid kolme koodireaga.

Teie Reacti rakendus ei teaks, et Reduxi pood eksisteerib ilma selleta pakkuja komponent, mis pärineb React-Reduxi sidumisteegist. Pakkuja komponent võtab ühe rekvisiidi (poe) ja mähib end ümber Reacti rakenduse, muutes Reduxi poe ülemaailmselt juurdepääsetavaks.

Kolmas ja viimane uus import aastal index.js ülaltoodud fail on kasutaja reduktor, mis on teie Reduxi poe toimimiseks eluliselt oluline.

Miks on reduktor oluline?

Reduktori eesmärk on muuta a UI komponendi olek põhineb a sooritatud toiming. Näiteks kui loote veebipõhise koolirakenduse, peate iga kasutaja logima rakendusse sisse, et saada juurdepääs sisselogimiskomponendi abil. Teine selle rakenduse suurepärane komponent on aktiivne kasutajakomponent, mis kuvab iga kasutaja nime või e-posti aadressi, kui ta teie rakendusse sisse logib.

Ülaltoodud näites muutub kasutaja aktiivne komponent iga kord, kui kasutaja oma kontole sisse logib. Seetõttu on see näide reduktori jaoks ideaalne olukord. Samuti on oluline meeles pidada, et reduktor saab oma funktsiooni täita ainult Reduxi tõttu pood, mis annab talle juurdepääsu mis tahes komponendi olekule ja toimingule, mida ta selle teostamiseks vajab kohustusi.

Kasutajate reduktori loomine

importida { createSlice } saidist "@reduxjs/toolkit";
eksport const userSlice = createSlice({
 nimi: "kasutaja",
 esialgne olek: { väärtus: {e-post: ""}},
 reduktorid: {
 sisselogimine: (olek, tegevus) => {
 olek.väärtus = action.payload
 },
 }
})
ekspordi const {login} = userSlice.actions
eksportida vaikimisi userSlice.reducer;

Reacti sees srckataloog saate luua a redutseerija kataloog, kus te oma oma salvestate kasutaja reduktor ja mis tahes muu reduktor, mida soovite oma Reduxi poodi lisada. The user.js ülaltoodud fail impordib loo Slice funktsioon Reduxi tööriistakomplektist.

The loo Slice funktsioon aktsepteerib a nimi, an algseisundja a reduktorobjekt mis salvestab mitu reduktori funktsiooni. Ülaltoodud reduktoriobjektil on aga ainult üks reduktorfunktsioon Logi sisse mis võtab oleku ja tegevuse argumentidena ning tagastab uue oleku.

Fail user.js ekspordib sisselogimise redutseerija. Sisselogimiskomponent impordib selle ja kasutab seda rakenduses useDispatch() konks.

Sisselogimiskomponendi loomine

import React alates 'react';
importige link saidilt '@mui/material/Link';
importida tekstiväli aadressilt '@mui/material/TextField';
importida tüpograafiat saidilt @mui/material/Typography;
import { Button, Box } saidist '@mui/material';
import { useDispatch } alates 'react-redux';
import { login } from '../reducers/user';
import { useState } alates 'react';
function Login() {
 const dispatch = useDispatch()
 const [e-post, setEmail] = useState('')
 const handleSubmit = () => {
 saatmine (login ({email: email}))
 }
tagasi (


sx={{
minu: 8,
ekraan: 'flex',
flexDirection: 'veerg',
alignItems: 'keskel',
}}>
 Logi sisse 
label="E-posti aadress"
nõutud
id="e-post"
name="email"
margin = "normaalne"
onChange={(e) => setEmail (e.target.value)}
/>
label="Parool"
nõutud
id="parool"
name="parool"
type="parool"
margin = "normaalne"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
unusta parooli?

variant = "sisaldub"
sx={{mt: 2}}
onClick={handleSubmit}
>
Logi sisse





);
}
ekspordi vaikimisi sisselogimine;

Ülaltoodud sisselogimiskomponent kasutab MUI raamatukogu. See loob lihtsa sisselogimisvormi, mis nõuab kasutaja e-posti aadressi ja parooli. Sisselogimisnupul klõpsamine käivitab funktsioon onClick, mis kutsub esile käepideEsita funktsiooni.

The käepideEsita funktsioon kasutab useState() ja useDispact() konksud koos sisselogimise reduktor aktiivse kasutaja e-posti aadressi Reduxi poes kättesaadavaks tegemiseks. Reduxi poest on nüüd igal Reacti rakenduse komponendil juurdepääs aktiivse kasutaja meilile.

Seotud: Konksud: Reaktsiooni kangelane Järgmine aktiivse kasutaja komponent hangib aktiivse kasutaja e-posti aadressi abiga useSelector() konks ja renderdab selle rakenduse kasutajaliidesesse.

Fail ActiveUser.js

import React from "react";
import { useSelector } "react-reduxist";
function ActiveUsers() {
 const user = useSelector((olek) => olek.kasutaja.väärtus)
 tagasi (


Aktiivsed kasutajad

 {user.email} 




 );
}

Värskendatud App.js-fail

Vaadake seda koodiosa:

import React from "react"; importida ActiveUsers saidilt "./components/ActiveUsers"; importige sisselogimine saidist "./components/Signin";
function App() {
tagasi ( 
);
}
ekspordi vaikerakendus; 

The App.js ülaltoodud fail renderdab nii aktiivsed kasutajad kui ka sisselogimiskomponendid teie rakenduses React, luues teie brauseris järgmise väljundi:

Kui kasutaja logib rakendusse sisse, värskendatakse aktiivsete kasutajate komponenti kohe uue aktiivse kasutaja meiliga.

Värskendatud kasutajaliides

Millal peaksite Reduxit kasutama?

Redux on üks populaarsemaid riigihaldusraamatukogusid, peamiselt seetõttu, et see teeb suurepärast tööd prognoositava ja usaldusväärse koodi loomisel. Kui paljud rakenduse komponendid kasutavad sama rakenduse olekut, on Redux ideaalne valik.

Kasutades ülaltoodud kooli näidet, sisselogimiskomponent, aktiivne kasutajakomponent, klassis osaleja komponent ja isegi profiilikomponent vajab kasutaja e-posti aadressi (või mõnda muud ainulaadset identifikaator). Seetõttu on Redux siin parim valik.

Kui teil on olek, mida kasutab ainult üks või kaks komponenti, võib parem valik olla React Pros.

Kuidas kasutada ReactJS-is rekvisiite

Kui otsite näpunäiteid ReactJS-i rekvisiitide kasutamise kohta, olete õiges kohas.

Loe edasi

Autori kohta