Mikä on React Redux ja miten sitä käytetään?

Redux on ilmainen tilanhallintakirjasto, joka toimii JavaScript-sovellusten käyttöliittymässä ja hallitsee kunkin käyttöliittymän komponentin tilaa. Redux-kirjasto helpottaa sovelluksen tietoja hallitsevan ja tallentavan koodin erottamista koodista, joka hallitsee tapahtumia ja niiden vaikutuksia sovelluksen käyttöliittymän eri osiin.

Yksi Reduxin tärkeimmistä myyntivalteista on, että se on joustava. Voit käyttää Reduxia lähes minkä tahansa JavaScript-kehyksen tai kirjaston kanssa.

Redux-tiimi on luonut kolme kirjastoa, nimittäin Redux, React-Redux ja Redux Toolkit. Kaikki kolme kirjastoa työskentelevät yhdessä antaakseen sinulle parhaan hyödyn React-kehityskokemuksestasi, ja tässä opetusartikkelissa opit käyttämään niitä.

React-Reduxin merkitys

Vaikka Redux on itsenäinen tilanhallintakirjasto, sen käyttäminen minkä tahansa käyttöliittymäkehyksen tai kirjaston kanssa vaatii käyttöliittymän sitovan kirjaston. Käyttöliittymän sitova kirjasto käsittelee tilasäiliön (tai tallennuksen) vuorovaikutuslogiikkaa, joka on joukko ennalta määritettyjä vaiheita, jotka yhdistävät käyttöliittymäkehyksen Redux-kirjastoon.

React-Redux on virallinen Redux UI -sidoskirjasto React-sovelluksille, ja sitä ylläpitää Redux-tiimi.

Aiheeseen liittyvä: Kuinka luoda ensimmäinen reagointisovelluksesi JavaScriptillä

Reduxin asentaminen projektihakemistoosi

React-sovelluksessasi on kaksi tapaa päästä Redux-kirjastoon. Redux-tiimin suosittelema lähestymistapa on käyttää seuraavaa komentoa uutta React-projektia luotaessa:

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

Yllä oleva komento määrittää automaattisesti Redux-työkalupaketin, React-Reduxin ja Redux-säilön. Jos kuitenkin haluat käyttää Reduxia olemassa olevassa React-projektissa, voit yksinkertaisesti asentaa Redux-kirjaston riippuvuutena seuraavalla komennolla:

npm asenna redux

Sitä seuraa React-Reduxin sitova käyttöliittymäkirjasto:

npm asenna react-redux

Ja Redux-työkalupakki:

npm asennus @reduxjs/toolkit

Redux Toolkit -kirjasto on myös tärkeä, koska se tekee Redux-myymälän konfigurointiprosessista nopeaa ja helppoa.

Redux Storen luominen

Ennen kuin voit aloittaa työskentelyn Redux-kirjaston kanssa, sinun on luotava Redux-tilasäiliö (tai -säilö). Redux-säilön luominen on välttämätöntä, koska se on objekti, joka tallentaa globaalin Redux-sovelluksen tilan.

Reactilla, kuten useimmilla etupään kehyksillä, on sovelluksissa sisääntulopiste, joka on tiedosto tai tiedostoryhmä ylimmällä tasolla. The index.html ja index.js tiedostot ovat kaksi tiedostoa, jotka ovat React-sovelluksen ylimmällä tasolla, joka on yläpuolella App.js tiedosto ja kaikki sovelluksen komponentit.

Joten index.js tiedosto on ihanteellinen paikka Redux-myymälän luomiseen.

Päivitetään index.js: ää Redux Storen avulla

tuo React osoitteesta "react"
tuo ReactDOM "react-domista"
tuo sovellus osoitteesta './App'
tuo reportWebVitals osoitteesta "./reportWebVitals"
tuo {configureStore} @reduxjs/toolkitista
tuo { Provider } from "react-redux"
tuo käyttäjä osoitteesta './reducers/user'
const store = configureStore({
 supistin:{
 käyttäjä
 }
})
ReactDOM.render(




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

Yllä olevassa koodissa on paljon purettavaa, mutta paras paikka aloittaa on configureStore toiminto. Välittömästi alat nähdä Redux Toolkit -kirjaston asentamisen edut configureStore -toiminto luo Redux-kaupan vain kolmella koodirivillä.

React-sovelluksesi ei tietäisi, että Redux-kauppa on olemassa ilman palveluntarjoajan komponentti, joka tulee React-Redux-sidoskirjastosta. Palveluntarjoajakomponentti ottaa yhden rekvisiitin (myymälän) ja kietoutuu React-sovelluksen ympärille, jolloin Redux-kauppa on maailmanlaajuisesti käytettävissä.

Kolmas ja viimeinen uusi tuonti index.js yllä oleva tiedosto on käyttäjän vähennys, mikä on elintärkeää Redux-myymäläsi toiminnan kannalta.

Miksi supistin on tärkeä?

Supistimen tarkoitus on muuttaa a Käyttöliittymäkomponentin tila perustuu a suoritettu toimenpide. Jos esimerkiksi luot verkkokoulusovellusta, sinun on jokaisen käyttäjän kirjauduttava sovellukseen päästäkseen sisäänkirjautumiskomponentin avulla. Toinen loistava komponentti tälle sovellukselle on aktiivinen käyttäjäkomponentti, joka näyttää jokaisen käyttäjän nimen tai sähköpostiosoitteen, kun he kirjautuvat sisään sovellukseesi.

Yllä olevassa esimerkissä aktiivinen käyttäjäkomponentti muuttuu aina, kun käyttäjä kirjautuu tililleen. Tämä esimerkki on siksi ihanteellinen tilanne supistimelle. On myös tärkeää muistaa, että pelkistäjä voi suorittaa tehtävänsä vain Reduxin ansiosta myymälä, joka antaa sille pääsyn minkä tahansa komponentin tilaan ja toimintoihin, joita se tarvitsee suorittaakseen sen velvollisuuksia.

User Reducerin luominen

tuo { CreateSlice } tiedostosta "@reduxjs/toolkit";
export const userSlice = createSlice({
 nimi: "käyttäjä",
 aloitustila: { arvo: {email: ""}},
 supistimet: {
 kirjautuminen: (tila, toiminta) => {
 tila.arvo = action.payload
 },
 }
})
export const {login} = userSlice.actions
vie oletusarvoinen userSlice.reducer;

Reactin sisällä srchakemistosta voit luoda a supistimen hakemisto, johon säilytät omasi käyttäjän vähennys ja kaikki muut reduktorit, jotka haluat lisätä Redux-kauppaasi. The user.js yllä oleva tiedosto tuo luo Slice toiminto Redux Toolkitista.

The luo Slice toiminto hyväksyy a nimi, an alkutila, ja a supistusobjekti joka tallentaa useita vähennystoimintoja. Yllä olevalla supistusobjektilla on kuitenkin vain yksi supistustoiminto nimeltään Kirjaudu sisään joka ottaa tilan ja toiminnan argumentteina ja palauttaa uuden tilan.

User.js-tiedosto vie sisäänkirjautumisen vähennyksen. Kirjautumiskomponentti tuo sen ja käyttää sitä useDispatch() koukku.

Sisäänkirjautumiskomponentin luominen

tuonti React from 'react';
tuo linkki osoitteesta '@mui/material/Link';
tuo tekstikenttä osoitteesta @mui/material/TextField;
tuo typografia osoitteesta @mui/material/Typography;
tuo { Button, Box } osoitteesta @mui/material;
tuo { useDispatch } "react-reduxista";
tuo { kirjautuminen } osoitteesta '../reducers/user';
tuo { useState } kentästä 'react';
function Signin() {
 const dispatch = useDispatch()
 const [sähköposti, setEmail] = useState('')
 const handleSubmit = () => {
 lähetys (kirjautuminen ({email: email}))
 }
paluu (


sx={{
minun: 8,
näyttö: "flex",
flexDirection: sarake,
alignItems: 'center',
}}>
 Kirjaudu sisään 
label="Sähköpostiosoite"
edellytetään
id="sähköposti"
name="sähköposti"
margin="normaali"
onChange={(e) => setEmail (e.target.value)}
/>
label="Salasana"
edellytetään
id="salasana"
name="salasana"
type="salasana"
margin="normaali"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
unohtaa salasana?

variantti="sisältyy"
sx={{mt: 2}}
onClick={handleSubmit}
>
Kirjaudu sisään





);
}
Vie oletusarvoinen kirjautuminen;

Yllä oleva kirjautumiskomponentti käyttää MUI-kirjasto. Se luo yksinkertaisen kirjautumislomakkeen, joka vaatii käyttäjän sähköpostiosoitteen ja salasanan. Kirjautumispainikkeen napsauttaminen käynnistää onClick-toiminto, joka kutsuu käsitteleLähetä toiminto.

The käsitteleLähetä toiminto käyttää useState() ja useDispact() koukut yhdessä kirjautumisen vähentäjä asettaaksesi aktiivisen käyttäjän sähköpostiosoitteen saataville Redux-kaupassa. Redux-kaupasta jokaisella React-sovelluksen komponentilla on nyt pääsy aktiivisen käyttäjän sähköpostiin.

Aiheeseen liittyvä: Koukut: Reaktion sankari Seuraava aktiivinen käyttäjäkomponentti hakee aktiivisen käyttäjän sähköpostiosoitteen avulla käytä Selector()-koukkua ja renderöi sen sovelluksen käyttöliittymään.

ActiveUser.js-tiedosto

tuonti React from "react";
tuo { useSelector } "react-reduxista";
function ActiveUsers() {
 const user = useSelector((tila) => tila.käyttäjä.arvo)
 paluu (


Aktiiviset käyttäjät

 {user.email} 




 );
}

Päivitetty App.js-tiedosto

Katso tämä koodinpätkä:

tuonti React from "react"; tuoda ActiveUsers osoitteesta "./components/ActiveUsers"; tuo sisäänkirjautuminen osoitteesta "./components/Signin";
function App() {
paluu ( 
);
}
Vie oletussovellus; 

The App.js Yllä oleva tiedosto renderöi sekä aktiiviset käyttäjät että sisäänkirjautumiskomponentit React-sovelluksessasi luoden seuraavan tulosteen selaimessasi:

Jos käyttäjä kirjautuu sisään sovellukseen, aktiiviset käyttäjät -komponentti päivittyy välittömästi uudella aktiivisen käyttäjän sähköpostilla.

Päivitetty käyttöliittymä

Milloin sinun pitäisi käyttää Reduxia?

Redux on yksi suosituimmista valtionhallintakirjastoista, pääasiassa siksi, että se tekee erinomaista työtä ennustettavan ja luotettavan koodin luomisessa. Jos monet sovelluksen komponentit käyttävät samaa sovellustilaa, Redux on ihanteellinen valinta.

Yllä olevan kouluesimerkin avulla kirjautumiskomponentti, aktiivinen käyttäjäkomponentti, luokan osallistuja komponentti, ja jopa profiilikomponentti tarvitsee käyttäjän sähköpostiosoitteen (tai jonkin muun ainutlaatuisen tunniste). Tästä syystä Redux on paras vaihtoehto tässä.

Jos sinulla on tila, jota käyttää vain yksi tai enintään kaksi komponenttia, parempi vaihtoehto voi olla React-props.

Propsien käyttäminen ReactJS: ssä

Jos etsit vinkkejä rekvisiittakäyttöön ReactJS: ssä, olet oikeassa paikassa.

Lue Seuraava

Kirjailijasta