Co je React Redux a jak jej používáte?

Redux je bezplatná knihovna pro správu stavu, která funguje na front-endu aplikací JavaScript a spravuje stav každé komponenty v rámci uživatelského rozhraní. Knihovna Redux usnadňuje oddělení mezi kódem, který spravuje a ukládá data v aplikaci, a kódem, který spravuje události a jejich účinky na různé součásti uživatelského rozhraní aplikace.

Jedním z hlavních prodejních bodů Reduxu je, že je flexibilní. Redux můžete použít téměř s jakýmkoliv rámcem nebo knihovnou JavaScriptu.

Tým Redux vytvořil tři knihovny, jmenovitě Redux, React-Redux a Redux Toolkit. Všechny tři knihovny spolupracují, aby vám poskytly maximum ze zkušeností s vývojem Reactu, a v tomto výukovém článku se dozvíte, jak je používat.

Význam React-Redux

Ačkoli je Redux nezávislá knihovna pro správu stavu, její použití s ​​jakýmkoli front-endovým rámcem nebo knihovnou vyžaduje knihovnu pro vazby uživatelského rozhraní. Knihovna vazeb uživatelského rozhraní zpracovává logiku interakce stavového kontejneru (nebo úložiště), což je sada předdefinovaných kroků, které propojují front-end framework s knihovnou Redux.

React-Redux je oficiální knihovna vazeb Redux UI pro aplikace React a je spravována týmem Redux.

Příbuzný: Jak vytvořit aplikaci First React pomocí JavaScriptu

Instalace Redux do adresáře vašeho projektu

Existují dva způsoby, jak získat přístup ke knihovně Redux ve vaší aplikaci React. Doporučený přístup týmu Redux je použít následující příkaz při vytváření nového projektu React:

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

Výše uvedený příkaz automaticky nakonfiguruje sadu nástrojů Redux, React-Redux a úložiště Redux. Pokud však chcete použít Redux v existujícím projektu React, můžete jednoduše nainstalovat knihovnu Redux jako závislost pomocí následujícího příkazu:

npm nainstalovat redux

Následuje knihovna uživatelského rozhraní pro vazby React-Redux:

npm install reagovat-redux

A sada nástrojů Redux:

npm install @reduxjs/toolkit

Knihovna Redux Toolkit je také důležitá, protože umožňuje rychlý a snadný proces konfigurace úložiště Redux.

Vytvoření obchodu Redux

Než začnete pracovat s knihovnou Redux, budete muset vytvořit kontejner stavu Redux (nebo úložiště). Vytvoření úložiště Redux je nezbytné, protože je to objekt, který ukládá globální stav aplikace Redux.

React, stejně jako většina front-endových frameworků, má vstupní bod ve svých aplikacích, což je soubor nebo skupina souborů na nejvyšší úrovni. The index.html a index.js soubory jsou dva soubory, které jsou na nejvyšší úrovni aplikace React, která je nad App.js soubor a všechny součásti v aplikaci.

Takže index.js soubor je ideálním místem pro vytvoření obchodu Redux.

Aktualizace index.js pomocí obchodu Redux Store

importovat Reagovat z 'reagovat'
importovat ReactDOM z 'react-dom'
importovat aplikaci z './App'
importovat reportWebVitals z "./reportWebVitals"
import {configureStore} z "@reduxjs/toolkit"
import { Provider } z 'react-redux'
importovat uživatele z './reducers/user'
const store = configureStore({
 reduktor:{
 uživatel
 }
})
ReactDOM.render(




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

Ve výše uvedeném kódu je toho hodně k rozbalení, ale nejlepší místo, kde začít, je s configureStore funkce. Okamžitě začnete vidět výhody instalace knihovny Redux Toolkit jako configureStore Funkce vytvoří obchod Redux s pouhými třemi řádky kódu.

Vaše aplikace React by nevěděla, že obchod Redux existuje bez komponenta poskytovatele, který pochází z vazebné knihovny React-Redux. Komponenta poskytovatele má jedinou podpěru (obchod) a obklopuje se kolem aplikace React, čímž je obchod Redux globálně přístupný.

Třetí a poslední nový import v index.js výše uvedený soubor je uživatelský reduktor, který je životně důležitý pro provoz vašeho obchodu Redux.

Proč je reduktor důležitý?

Účelem reduktoru je změnit a Stav komponenty uživatelského rozhraní na základě a provedená akce. Pokud například vytváříte online školní aplikaci, budete vyžadovat, aby se každý uživatel přihlásil do aplikace, aby získal přístup pomocí přihlašovací komponenty. Další skvělou komponentou pro tuto aplikaci je aktivní uživatelská komponenta, která každému uživateli zobrazí jméno nebo e-mailovou adresu, když se přihlásí do vaší aplikace.

Ve výše uvedeném příkladu se aktivní uživatelská komponenta změní pokaždé, když uživatel provede akci přihlášení ke svému účtu. Tento příklad je tedy ideální situací pro reduktor. Je také důležité si uvědomit, že reduktor může plnit svou funkci pouze díky Reduxu úložiště, které mu umožňuje přístup ke stavu jakékoli součásti a akci, kterou potřebuje k provedení povinnosti.

Vytvoření uživatelské redukce

import { createSlice } z "@reduxjs/toolkit";
export const userSlice = createSlice({
 jméno: "uživatel",
 initialState: { value: {e-mail: ""}},
 redukce: {
 přihlášení: (stav, akce) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
exportovat výchozí userSlice.reducer;

V rámci React's srcadresář můžete vytvořit a adresář reduktoru, kde budete ukládat své uživatelský reduktor a jakoukoli další redukci, kterou chcete přidat do svého obchodu Redux. The user.js výše uvedený soubor importuje vytvořitSlice funkce ze sady nástrojů Redux.

The vytvořitSlice funkce přijímá a název, an výchozí stava a objekt redukce která ukládá více funkcí redukce. Avšak výše uvedený objekt reduktorů má pouze jednu funkci redukce přihlásit se který bere stav a akci jako argumenty a vrací nový stav.

Soubor user.js exportuje redukci přihlášení. Přihlašovací komponenta jej importuje a použije v useDispatch() háček.

Vytvoření komponenty přihlášení

import Reagovat z 'reagovat';
importovat odkaz z '@mui/material/Link';
import TextField z '@mui/material/TextField';
import typografie z '@mui/material/Typography';
import { Button, Box } z '@mui/material';
import { useDispatch } z 'react-redux';
import { přihlášení } z '../reducers/user';
import { useState } z 'react';
function Signin() {
 const dispatch = useDispatch()
 const [e-mail, setEmail] = useState('')
 const handleSubmit = () => {
 odeslání (login({email: email}))
 }
vrátit se (


sx={{
moje: 8,
displej: 'flex',
flexDirection: 'sloupec',
alignItems: 'centrum',
}}>
 Přihlásit se 
label="E-mailová adresa"
Požadované
id="e-mail"
name="e-mail"
margin="normální"
onChange={(e) => setEmail (e.target.value)}
/>
label="Heslo"
Požadované
id="heslo"
name="heslo"
type="heslo"
margin="normální"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
zapomenout heslo?

variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}
>
Přihlásit se





);
}
exportovat výchozí přihlášení;

Výše uvedená komponenta přihlášení používá knihovna MUI. Vytvoří jednoduchý přihlašovací formulář, který vyžaduje e-mail a heslo uživatele. Kliknutím na tlačítko přihlášení se spustí funkce onClick, který bude volat zvládnout Odeslat funkce.

The zvládnout Odeslat funkce používá useState() a useDispact() háčky spolu s reduktor přihlášení zpřístupnění e-mailové adresy aktivního uživatele v obchodě Redux. Z obchodu Redux má nyní každá součást v aplikaci React přístup k e-mailu aktivního uživatele.

Příbuzný: Hooks: The Hero of React Následující komponenta aktivního uživatele načte e-mailovou adresu aktivního uživatele pomocí háček useSelector(). a vykreslí jej do uživatelského rozhraní aplikace.

Soubor ActiveUser.js

import Reagovat z "reagovat";
import { useSelector } z "react-redux";
function ActiveUsers() {
 const user = useSelector((stav) => state.user.value)
 vrátit se (


Aktivní uživatelé

 {user.email} 




 );
}

Aktualizovaný soubor App.js

Podívejte se na tento kousek kódu:

import Reagovat z "reagovat"; importovat ActiveUsers z "./components/ActiveUsers"; importovat přihlášení z "./components/Signin";
function App() {
vrátit se ( 
);
}
exportovat výchozí aplikaci; 

The App.js výše uvedený soubor vykreslí aktivní uživatele i přihlašovací komponenty ve vaší aplikaci React a vytvoří ve vašem prohlížeči následující výstup:

Pokud se uživatel přihlásí do aplikace, komponenta aktivní uživatelé se okamžitě aktualizuje novým e-mailem aktivního uživatele.

Aktualizované uživatelské rozhraní

Kdy byste měli používat Redux?

Redux je jednou z nejoblíbenějších knihoven státní správy, hlavně proto, že odvádí vynikající práci při vytváření předvídatelného a spolehlivého kódu. Pokud mnoho komponent v aplikaci používá stejný stav aplikace, Redux je ideální volbou.

Použijeme-li výše uvedený školní příklad, komponenta přihlášení, komponenta aktivního uživatele, účastník třídy komponenta a dokonce i komponenta profilu bude potřebovat e-mailovou adresu uživatele (nebo nějakou jinou jedinečnou identifikátor). To je důvod, proč je zde Redux nejlepší volbou.

Pokud však máte stav, který používá pouze jedna nebo maximálně dvě komponenty, pak lepší možností mohou být rekvizity React.

Jak používat rekvizity v ReactJS

Pokud hledáte tipy, jak používat rekvizity v ReactJS, jste na správném místě.

Přečtěte si další

O autorovi