Redux är en free tillståndshanteringsbibliotek som fungerar på front-end 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 självstudieartikeln 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-bindningsbiblioteket för React-applikationer, och det underhålls av Redux-teamet.
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 install redux
Följt av React-Redux-bindningsgränssnittsbiblioteket:
npm install react-redux
Och Redux verktygslåda:
npm install @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). Det är nödvändigt att skapa en Redux-butik eftersom det är objektet som lagrar det globala Redux-tillstå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
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import {configureStore} from "@reduxjs/toolkit"
import { Provider } from 'react-redux'
import user from './reducers/user'
const store = configureStore({
reducer:{
user
}
})
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
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. Du kommer genast 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 på 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 reducerare endast kan utföra sin funktion på grund av Redux-butiken som ger den tillgång till tillståndet för alla komponenter och den åtgärd den behöver för att utföra sina uppgifter.
Skapar User Reducer
import { createSlice } from "@reduxjs/toolkit";
export const userSlice = createSlice({
name: "user",
initialState: { value: {email: ""}},
reducers: {
login: (state, action) => {
state.value = action.payload
},
}
})
export const {login} = userSlice.actions
export default userSlice.reducer;
Inom Reacts src katalog du kan skapa en reducerkatalog, det är där du ska förvara 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
import React from 'react';
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
function Signin() {
const dispatch = useDispatch()
const [email, setEmail] = useState('')
const handleSubmit = () => {
dispatch(login({email: email}))
}return (
<div>
<Box
sx={{
my: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}>
<Typography variant="h4"> Sign In </Typography>
<TextField
label="Email Address"
required
id="email"
name="email"
margin="normal"
onChange={(e) => setEmail(e.target.value)}
/>
<TextField
label="Password"
required
id="password"
name="password"
type="password"
margin="normal"
/>
<Link
href="#"
sx={{mr: 12, mb: 2}}
>
forget password?
</Link>
<Button
variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Sign In
</Button>
</Box>
</div>
);
}
export default Signin;
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 nu varje komponent i React-appen tillgång till en aktiv användares e-post.
Följande aktiva användarkomponent hämtar en aktiv användares e-postadress med hjälp av useSelector() krok och renderar den till appens användargränssnitt.
Filen ActiveUser.js
import React from "react";
import { useSelector } from "react-redux";function ActiveUsers() {
const user = useSelector((state) => state.user.value)
return (
<div>
<h2>Active Users</h2>
<p> {user.email} </p>
</div>
);
}
Den uppdaterade App.js-filen
Ta en titt på denna kodbit:
import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin";
function App() {
return ( <div> <ActiveUsers/> <Signin/> </div>
);
}
export default App;
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 kommer inloggningskomponenten, aktiv användarkomponent, klassdeltagares komponent och även en profilkomponent 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 bara används av en eller två komponenter som mest, kan ett bättre alternativ vara React-rekvisita.
Om författaren
Kadeisha Kean (39 artiklar publicerade)
Kadeisha Kean är en full-stack mjukvaruutvecklare och teknisk/teknikskribent. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska koncepten; producera material som lätt kan förstås av alla nybörjare. Hon brinner för att skriva, utveckla intressant programvara och att resa runt i världen (genom dokumentärer).
Mer från Kadeisha Kean
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
