Vad är React Redux och hur använder du det?

Redux är ett gratis tillståndshanteringsbibliotek som fungerar på fronten av JavaScript-applikationer och hanterar tillståndet för varje komponent i ett användargränssnitt. Redux-biblioteket underlättar en separation mellan kod som hanterar och lagrar data i en applikation och kod som hanterar händelser och deras effekter på de olika komponenterna i en applikations användargränssnitt.

En av de viktigaste försäljningsargumenten med Redux är att den är flexibel. Du kan använda Redux med nästan vilket JavaScript-ramverk eller bibliotek som helst.

Redux-teamet har skapat tre bibliotek, nämligen Redux, React-Redux och Redux Toolkit. Alla tre biblioteken arbetar tillsammans för att ge dig det mesta av din React-utvecklingsupplevelse, och i den här handledningsartikeln kommer du att lära dig hur du använder dem.

Vikten av React-Redux

Även om Redux är ett oberoende tillståndshanteringsbibliotek, kräver användning av det med alla front-end-ramverk eller bibliotek ett UI-bindande bibliotek. Ett UI-bindningsbibliotek hanterar interaktionslogiken för tillståndsbehållaren (eller lagringsutrymmet), som är en uppsättning fördefinierade steg som kopplar ett front-end-ramverk till Redux-biblioteket.

React-Redux är det officiella Redux UI-bindande biblioteket för React-applikationer, och det underhålls av Redux-teamet.

Relaterad: Hur du skapar din första React-app med JavaScript

Installera Redux i din projektkatalog

Det finns två sätt att få tillgång till Redux-biblioteket i din React-applikation. Redux-teamets rekommenderade tillvägagångssätt är att använda följande kommando när du skapar ett nytt React-projekt:

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

Kommandot ovan konfigurerar automatiskt Redux Toolkit, React-Redux och Redux-butiken. Men om du vill använda Redux i ett befintligt React-projekt kan du helt enkelt installera Redux-biblioteket som ett beroende med följande kommando:

npm installera redux

Följt av React-Redux-bindningsgränssnittsbiblioteket:

npm installera react-redux

Och Redux verktygslåda:

npm installera @reduxjs/toolkit

Redux Toolkit-biblioteket är också viktigt eftersom det gör Redux-butikskonfigurationsprocessen snabb och enkel.

Skapa en Redux-butik

Innan du kan börja arbeta med Redux-biblioteket måste du skapa en Redux-tillståndsbehållare (eller butik). Att skapa en Redux-butik är nödvändigt eftersom det är objektet som lagrar det globala Redux-applikationstillståndet.

React, som de flesta front-end-ramverk, har en ingångspunkt i sina applikationer, vilket är en fil eller grupp av filer på översta nivån. De index.html och index.js filer är två filer som är på översta nivån i en React-app, som ligger över App.js filen och alla komponenter i appen.

Alltså index.js fil är den idealiska platsen för att skapa en Redux-butik.

Uppdatera index.js med Redux Store

importera Reagera från 'reagera'
importera ReactDOM från 'react-dom'
importera app från './App'
importera reportWebVitals från "./reportWebVitals"
importera {configureStore} från "@reduxjs/toolkit"
importera { Provider } från 'react-redux'
importera användare från './reducers/user'
const store = configureStore({
 reducerare:{
 användare
 }
})
ReactDOM.render(




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

Det finns mycket att packa upp i koden ovan, men det bästa stället att börja är med configureStore fungera. Omedelbart kommer du att börja se fördelarna med att installera Redux Toolkit-biblioteket som configureStore funktionen skapar Redux-butiken med bara tre rader kod.

Din React-applikation skulle inte veta att Redux-butiken existerar utan leverantörskomponent, som kommer från React-Redux-bindningsbiblioteket. Leverantörskomponenten tar en enda rekvisita (butiken) och lindar sig runt React-appen, vilket gör Redux-butiken globalt tillgänglig.

Den tredje och sista nya importen i index.js filen ovan är användarreducerare, vilket är mycket viktigt för driften av din Redux-butik.

Varför är en reducering viktig?

Syftet med en reducer är att ändra en UI-komponenttillstånd baserat på a utförd åtgärd. Om du till exempel skapar en skolapplikation online, kräver du att varje användare loggar in i applikationen för att få åtkomst med en inloggningskomponent. En annan bra komponent för denna applikation är en aktiv användarkomponent, som visar varje användares namn eller e-postadress när de loggar in på din applikation.

I exemplet ovan kommer den aktiva användarkomponenten att ändras varje gång en användare utför åtgärden att logga in på sitt konto. Detta exempel är därför en idealisk situation för en reducering. Det är också viktigt att komma ihåg att en reducer bara kan utföra sin funktion på grund av Redux butik som ger den tillgång till tillståndet för varje komponent och den åtgärd den behöver för att utföra sin plikter.

Skapar User Reducer

importera { createSlice } från "@reduxjs/toolkit";
export const userSlice = createSlice({
 namn: "användare",
 initialState: { värde: {email: ""}},
 reducerare: {
 login: (tillstånd, åtgärd) => {
 state.value = action.nyttolast
 },
 }
})
export const {login} = userSlice.actions
export standard userSlice.reducer;

Inom Reacts srckatalog du kan skapa en reducerkatalog, det är där du kommer att lagra din användarreducerare och alla andra reducerare du vill lägga till i din Redux-butik. De user.js filen ovan importerar skapa Slice funktion från Redux Toolkit.

De skapa Slice funktion accepterar en namn, en initialtillstånd, och en reduceringsobjekt som lagrar flera reducerfunktioner. Dock har reduceringsobjektet ovan bara en reduceringsfunktion som kallas logga in som tar ett tillstånd och en handling som argument och returnerar ett nytt tillstånd.

Filen user.js exporterar inloggningsreduceraren. Inloggningskomponenten importerar den och använder den i useDispatch() krok.

Skapa inloggningskomponenten

importera Reagera från 'reagera';
importera länk från '@mui/material/Link';
importera TextField från '@mui/material/TextField';
importera typografi från '@mui/material/Typography';
importera { Button, Box } från '@mui/material';
importera { useDispatch } från 'react-redux';
importera { login } från '../reducers/user';
importera { useState } från 'react';
function Signin() {
 const dispatch = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 utskick (inloggning({email: email}))
 }
lämna tillbaka (


sx={{
min: 8,
visa: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
 Logga in 
label="E-postadress"
nödvändig
id="e-post"
name="e-post"
marginal="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Lösenord"
nödvändig
id="lösenord"
name="lösenord"
typ="lösenord"
marginal="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Glöm lösenord?

variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Logga in





);
}
export standardinloggning;

Inloggningskomponenten ovan använder MUI-biblioteket. Det skapar ett enkelt inloggningsformulär som kräver en användares e-postadress och lösenord. Om du klickar på inloggningsknappen utlöses en onClick-funktionen, som kommer att kalla handleSubmit fungera.

De handleSubmit funktionen använder useState() och useDispact() krokar tillsammans med inloggningsreducerare för att göra en aktiv användares e-postadress tillgänglig i Redux-butiken. Från Redux-butiken har varje komponent i React-appen nu tillgång till en aktiv användares e-post.

Relaterad: Hooks: The Hero of React Följande aktiva användarkomponent hämtar en aktiv användares e-postadress med hjälp av useSelector() krok och återger den till appens användargränssnitt.

Filen ActiveUser.js

import Reagera från "reagera";
importera { useSelector } från "react-redux";
function ActiveUsers() {
 const användare = useSelector((stat) => state.user.value)
 lämna tillbaka (


Aktiva användare

 {user.email} 




 );
}

Den uppdaterade App.js-filen

Ta en titt på denna kodbit:

import Reagera från "reagera"; importera ActiveUsers från "./components/ActiveUsers"; importera inloggning från "./components/Signin";
function App() {
lämna tillbaka ( 
);
}
exportera standardapp; 

De App.js filen ovan återger både de aktiva användarna och inloggningskomponenterna i din React-applikation och skapar följande utdata i din webbläsare:

Om en användare loggar in i programmet kommer den aktiva användarkomponenten omedelbart att uppdateras med en ny aktiv användares e-postadress.

Det uppdaterade användargränssnittet

När ska du använda Redux?

Redux är ett av de mest populära statsförvaltningsbiblioteken, främst för att det gör ett utmärkt jobb med att skapa förutsägbar och pålitlig kod. Om många komponenter i en applikation använder samma applikationstillstånd är Redux det perfekta valet.

Med hjälp av skolexemplet ovan, inloggningskomponenten, aktiv användarkomponent, klassdeltagare komponent, och även en profilkomponent kommer att behöva en användares e-postadress (eller någon annan unik identifierare). Det är därför Redux är det bästa alternativet här.

Men om du har ett tillstånd som endast används av en eller två komponenter, kan ett bättre alternativ vara React-rekvisita.

Hur man använder rekvisita i ReactJS

Om du letar efter tips om hur du använder rekvisita i ReactJS har du kommit rätt.

Läs Nästa

Om författaren