Mi az a React Redux és hogyan kell használni?

A Redux egy ingyenes állapotkezelési könyvtár, amely a JavaScript-alkalmazások kezelőfelületén működik, és kezeli az egyes összetevők állapotát a felhasználói felületen belül. A Redux könyvtár megkönnyíti az alkalmazásokban az adatokat kezelő és tároló kódok és az eseményeket és azok hatásait az alkalmazás felhasználói felületének különböző összetevőire gyakorolt ​​​​kódok elkülönítését.

A Redux egyik fő értékesítési pontja az, hogy rugalmas. A Reduxot szinte bármilyen JavaScript keretrendszerrel vagy könyvtárral használhatja.

A Redux csapata három könyvtárat hozott létre, nevezetesen a Reduxot, a React-Reduxot és a Redux Toolkit-et. Mindhárom könyvtár együtt dolgozik, hogy a legtöbbet hozza ki a React fejlesztési tapasztalatából, és ebben az oktatócikkben megtudhatja, hogyan kell használni őket.

A React-Redux jelentősége

Bár a Redux egy független állapotfelügyeleti könyvtár, bármely előtér-keretrendszerrel vagy könyvtárral való használatához felhasználói felület-összerendelési könyvtár szükséges. A felhasználói felület összerendelési könyvtára kezeli az állapottároló (vagy tároló) interakciós logikáját, amely előre meghatározott lépések halmaza, amely egy előtér-keretrendszert köt össze a Redux könyvtárral.

A React-Redux a hivatalos Redux UI kötési könyvtár a React alkalmazásokhoz, és a Redux csapata karbantartja.

Összefüggő: Hogyan készítsd el First React alkalmazásodat JavaScripttel

A Redux telepítése a projektkönyvtárba

Kétféleképpen férhet hozzá a Redux könyvtárhoz a React alkalmazásban. A Redux csapata által javasolt megközelítés a következő parancs használata új React projekt létrehozásakor:

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

A fenti parancs automatikusan konfigurálja a Redux Toolkit, a React-Redux és a Redux tárolót. Ha azonban a Reduxot egy meglévő React projektben szeretné használni, akkor egyszerűen telepítheti a Redux könyvtárat függőségként a következő paranccsal:

npm install redux

Ezt követi a React-Redux kötési UI könyvtár:

npm install react-redux

És a Redux eszközkészlet:

npm install @reduxjs/toolkit

A Redux Toolkit könyvtár azért is fontos, mert gyors és egyszerű a Redux áruház konfigurációs folyamata.

Redux áruház létrehozása

Mielőtt elkezdené dolgozni a Redux könyvtárral, létre kell hoznia egy Redux állapottárolót (vagy tárolót). A Redux tároló létrehozása azért szükséges, mert ez az objektum tárolja a Redux alkalmazás globális állapotát.

A React, mint a legtöbb front-end keretrendszer, alkalmazásaiban van egy belépési pont, amely egy fájl vagy fájlcsoport a legfelső szinten. A index.html és index.js A fájlok két olyan fájl, amelyek a React alkalmazás legfelső szintjén találhatók, amely a App.js fájlt és az alkalmazás összes összetevőjét.

Így a index.js fájl ideális hely egy Redux áruház létrehozásához.

Az index.js frissítése a Redux Store segítségével

React importálása a 'react'-ból
ReactDOM importálása a "react-dom"-ból
alkalmazás importálása innen: './App'
jelentésWebVitals importálása innen: "./reportWebVitals"
import {configureStore} a "@reduxjs/toolkit" készletből
import { Provider } from "react-redux"
felhasználó importálása a './reducers/user' webhelyről
const store = configureStore({
 csökkentő:{
 felhasználó
 }
})
ReactDOM.render(




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

A fenti kódban sok mindent ki kell csomagolni, de a legjobb hely a kezdéshez a configureStore funkció. Azonnal látni fogja a Redux Toolkit könyvtár telepítésének előnyeit, mint a configureStore függvény létrehozza a Redux tárolót mindössze három sor kóddal.

A React alkalmazás nem tudná, hogy a Redux áruház létezik a nélkül szolgáltató komponens, amely a React-Redux kötési könyvtárból származik. A szolgáltató komponens egyetlen kelléket (az üzletet) vesz fel, és a React alkalmazás köré teker, így a Redux áruház globálisan elérhetővé válik.

A harmadik és egyben utolsó új import a index.js A fenti fájl a felhasználói reduktor, ami létfontosságú Redux üzlete működéséhez.

Miért fontos a reduktor?

A reduktor célja megváltoztatni a UI összetevő állapota alapján a végrehajtott művelet. Például, ha online iskolai alkalmazást hoz létre, minden felhasználónak be kell jelentkeznie az alkalmazásba, hogy egy bejelentkezési összetevő használatával hozzáférhessen. Az alkalmazás másik nagyszerű összetevője egy aktív felhasználói komponens, amely minden felhasználó nevét vagy e-mail címét megjeleníti, amikor bejelentkezik az alkalmazásba.

A fenti példában az aktív felhasználói összetevő minden alkalommal megváltozik, amikor a felhasználó bejelentkezik a fiókjába. Ez a példa tehát ideális helyzet egy reduktor számára. Azt is fontos megjegyezni, hogy a reduktor csak a Redux miatt tudja ellátni a funkcióját tároló, amely hozzáférést biztosít bármely összetevő állapotához és a végrehajtásához szükséges művelethez kötelességek.

Felhasználói reduktor létrehozása

import { createSlice } innen: "@reduxjs/toolkit";
export const userSlice = createSlice({
 név: "felhasználó",
 kezdeti állapot: { érték: {e-mail: ""}},
 szűkítők: {
 bejelentkezés: (állapot, akció) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
alapértelmezett userSlice.reducer exportálása;

A Reacton belül srcKönyvtár létrehozhat a szűkítő könyvtár, ahol tárolni fogja felhasználói reduktor és bármely más reduktor, amelyet hozzá szeretne adni a Redux üzletéhez. A user.js fenti fájl importálja a CreateSlice funkciót a Redux Toolkitből.

A CreateSlice függvény elfogadja a név, an kezdeti állapotés a szűkítő tárgy amely több reduktor funkciót tárol. A fenti reduktorok objektumnak azonban csak egy szűkítő funkciója van, az úgynevezett Belépés amely egy állapotot és egy cselekvést érvnek vesz, és új állapotot ad vissza.

A user.js fájl exportálja a bejelentkezési reduktort. A bejelentkezési összetevő importálja és használja a useDispatch() horog.

A bejelentkezési komponens létrehozása

import React a 'react'-ból;
import hivatkozás a '@mui/material/Link' címről;
szövegmező importálása a '@mui/material/TextField' címről;
tipográfia importálása a '@mui/material/Typography' címről;
import { Button, Box } innen: '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } in 'react';
function Signin() {
 const dispatch = useDispatch()
 const [e-mail, setEmail] = useState('')
 const handleSubmit = () => {
 feladás (bejelentkezés ({e-mail: email}))
 }
Visszatérés (


sx={{
én: 8,
kijelző: "flex",
flexDirection: 'oszlop',
alignItems: 'center',
}}>
 Bejelentkezés 
label="E-mail cím"
kívánt
id="e-mail"
name="email"
margin="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Jelszó"
kívánt
id="jelszó"
name="jelszó"
type="jelszó"
margin="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
elfelejtett jelszo?

variáns="tartalmazott"
sx={{mt: 2}}
onClick={handleSubmit}
>
Bejelentkezés





);
}
alapértelmezett bejelentkezés exportálása;

A fenti bejelentkezési összetevőt használja a MUI könyvtárat. Egy egyszerű bejelentkezési űrlapot hoz létre, amelyhez a felhasználó e-mail-címe és jelszava szükséges. A bejelentkezés gombra kattintva egy onClick funkciót, amely a handleSubmit funkció.

A handleSubmit függvény a useState() és useDispact() horgok együtt a bejelentkezés csökkentő hogy egy aktív felhasználó e-mail címét elérhetővé tegye a Redux áruházban. A Redux áruházból a React alkalmazás minden összetevője hozzáférhet egy aktív felhasználó e-mailjéhez.

Összefüggő: Hooks: The Hero of React A következő aktív felhasználói komponens lekéri egy aktív felhasználó e-mail címét a segítségével useSelector() hook és megjeleníti az alkalmazás felhasználói felületén.

Az ActiveUser.js fájl

import React from "react";
import { useSelector } from "react-redux";
function ActiveUsers() {
 const user = useSelector((állapot) => állapot.felhasználó.érték)
 Visszatérés (


Aktív felhasználók

 {user.email} 




 );
}

A frissített App.js fájl

Vessen egy pillantást erre a kódrészletre:

import React from "react"; importálja az ActiveUsers-t a "./components/ActiveUsers" webhelyről; bejelentkezés importálása a "./components/Signin" fájlból;
function App() {
Visszatérés ( 
);
}
alapértelmezett alkalmazás exportálása; 

A App.js A fenti fájl megjeleníti az aktív felhasználókat és a bejelentkezési összetevőket is a React alkalmazásban, és a következő kimenetet hozza létre a böngészőben:

Ha egy felhasználó bejelentkezik az alkalmazásba, az aktív felhasználók összetevő azonnal frissül egy új aktív felhasználói e-mail-címmel.

A frissített felhasználói felület

Mikor érdemes Reduxot használni?

A Redux az egyik legnépszerűbb államkezelési könyvtár, főként azért, mert kiváló munkát végez a kiszámítható és megbízható kód létrehozásában. Ha egy alkalmazásban sok összetevő ugyanazt az alkalmazási állapotot használja, a Redux az ideális választás.

A fenti iskolai példa használatával a bejelentkezési összetevő, az aktív felhasználói összetevő, az osztály résztvevője összetevőt, és még a profilösszetevőnek is szüksége lesz a felhasználó e-mail címére (vagy más egyedi azonosító). Ezért a Redux a legjobb választás itt.

Ha azonban olyan állapota van, amelyet legfeljebb egy vagy két összetevő használ, akkor jobb megoldás lehet a React kellékek.

A kellékek használata a ReactJS-ben

Ha tippeket keres a ReactJS kellékeinek használatához, akkor jó helyen jár.

Olvassa el a következőt

A szerzőről