Was ist React Redux und wie wird es verwendet?

Redux ist eine kostenlose Zustandsverwaltungsbibliothek, die auf dem Front-End von JavaScript-Anwendungen arbeitet und den Zustand jeder Komponente innerhalb einer Benutzeroberfläche verwaltet. Die Redux-Bibliothek ermöglicht eine Trennung zwischen Code, der Daten in einer Anwendung verwaltet und speichert, und Code, der Ereignisse und deren Auswirkungen auf die verschiedenen Komponenten der Benutzeroberfläche einer Anwendung verwaltet.

Eines der Hauptverkaufsargumente von Redux ist seine Flexibilität. Sie können Redux mit fast jedem JavaScript-Framework oder jeder JavaScript-Bibliothek verwenden.

Das Redux-Team hat drei Bibliotheken erstellt, nämlich Redux, React-Redux und Redux Toolkit. Alle drei Bibliotheken arbeiten zusammen, um Ihnen das Beste aus Ihrer React-Entwicklungserfahrung herauszuholen. In diesem Tutorial-Artikel erfahren Sie, wie Sie sie verwenden.

Die Bedeutung von React-Redux

Obwohl Redux eine unabhängige Zustandsverwaltungsbibliothek ist, erfordert die Verwendung mit jedem Front-End-Framework oder jeder Bibliothek eine UI-Bindungsbibliothek. Eine UI-Bindungsbibliothek verarbeitet die Interaktionslogik des Zustandscontainers (oder Speichers), bei der es sich um eine Reihe vordefinierter Schritte handelt, die ein Front-End-Framework mit der Redux-Bibliothek verbinden.

React-Redux ist die offizielle Redux-UI-Bindungsbibliothek für React-Anwendungen und wird vom Redux-Team verwaltet.

Verwandt: So erstellen Sie Ihre erste React-App mit JavaScript

Installieren von Redux in Ihrem Projektverzeichnis

Es gibt zwei Möglichkeiten, um auf die Redux-Bibliothek in Ihrer React-Anwendung zuzugreifen. Der vom Redux-Team empfohlene Ansatz besteht darin, beim Erstellen eines neuen React-Projekts den folgenden Befehl zu verwenden:

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

Der obige Befehl konfiguriert automatisch das Redux Toolkit, React-Redux und den Redux Store. Wenn Sie jedoch Redux in einem bestehenden React-Projekt verwenden möchten, dann können Sie die Redux-Bibliothek einfach als Abhängigkeit mit dem folgenden Befehl installieren:

npm redux installieren

Gefolgt von der React-Redux-Bindungs-UI-Bibliothek:

npm install React-Redux

Und das Redux-Toolkit:

npm install @reduxjs/toolkit

Die Redux Toolkit-Bibliothek ist auch deshalb wichtig, weil sie den Konfigurationsprozess des Redux-Stores schnell und einfach macht.

Erstellen eines Redux Stores

Bevor Sie mit der Redux-Bibliothek arbeiten können, müssen Sie einen Redux-Zustandscontainer (oder Store) erstellen. Das Erstellen eines Redux-Speichers ist erforderlich, da es das Objekt ist, das den globalen Redux-Anwendungsstatus speichert.

Wie die meisten Front-End-Frameworks hat React einen Einstiegspunkt in seine Anwendungen, bei dem es sich um eine Datei oder eine Gruppe von Dateien auf der obersten Ebene handelt. Der index.html und index.js Dateien sind zwei Dateien, die sich auf der obersten Ebene einer React-App befinden, die sich über der App.js Datei und alle Komponenten in der App.

Also, die index.js file ist der ideale Ort, um einen Redux Store zu erstellen.

Aktualisieren von index.js mit dem Redux Store

Reagieren aus 'reagieren' importieren
ReactDOM aus 'react-dom' importieren
App aus './App' importieren
importiere reportWebVitals aus "./reportWebVitals"
importiere {configureStore} aus "@reduxjs/toolkit"
import { Provider } from 'react-redux'
Benutzer aus './reducers/user' importieren
const store = configureStore({
 Reduzierstück: {
 Nutzer
 }
})
ReactDOM.render(




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

Im obigen Code gibt es viel zu entpacken, aber am besten beginnen Sie mit dem configureStore Funktion. Sie werden sofort die Vorteile der Installation der Redux Toolkit-Bibliothek als configureStore Funktion erstellt den Redux Store mit nur drei Zeilen Code.

Ihre React-Anwendung würde nicht wissen, dass der Redux-Store ohne die Anbieterkomponente, das aus der React-Redux-Bindungsbibliothek stammt. Die Anbieterkomponente nimmt eine einzelne Stütze (den Store) und wickelt sich um die React-App, wodurch der Redux-Store global zugänglich ist.

Der dritte und letzte Neuimport im index.js Datei oben ist die Benutzerreduzierer, die für den Betrieb Ihres Redux-Shops von entscheidender Bedeutung ist.

Warum ist ein Reduzierer wichtig?

Der Zweck eines Reduzierstücks besteht darin, a. zu ändern Zustand der UI-Komponente basierend auf a ausgeführte Aktion. Wenn Sie beispielsweise eine Online-Schulanwendung erstellen, müssen sich alle Benutzer bei der Anwendung anmelden, um mithilfe einer Anmeldekomponente Zugriff zu erhalten. Eine weitere großartige Komponente für diese Anwendung ist eine aktive Benutzerkomponente, die den Namen oder die E-Mail-Adresse jedes Benutzers anzeigt, wenn er sich bei Ihrer Anwendung anmeldet.

Im obigen Beispiel ändert sich die aktive Benutzerkomponente jedes Mal, wenn sich ein Benutzer bei seinem Konto anmeldet. Dieses Beispiel ist daher eine ideale Situation für ein Reduzierstück. Es ist auch wichtig zu bedenken, dass ein Reducer seine Funktion nur aufgrund des Redux. erfüllen kann Store, der Zugriff auf den Zustand jeder Komponente und die Aktion gibt, die sie zum Ausführen ihrer Aufgaben.

Erstellen des Benutzerreduzierers

import { createSlice } von "@reduxjs/toolkit";
export const userSlice = createSlice({
 Name: "Benutzer",
 initialState: { Wert: {E-Mail: ""}},
 Reduzierstücke: {
 Login: (Zustand, Aktion) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
Exportieren Sie standardmäßig userSlice.reducer;

Innerhalb von React's srcVerzeichnis du kannst ein erstellen Reduzierverzeichnis, dort werden Sie Ihre Benutzerreduzierer und jeden anderen Reduzierer, den Sie Ihrem Redux-Shop hinzufügen möchten. Der user.js Datei oben importiert die createSlice Funktion aus dem Redux Toolkit.

Der createSlice Funktion akzeptiert a Name, ein Ausgangszustand, und ein Reduzierobjekt das mehrere Reduzierfunktionen speichert. Das obige Reducer-Objekt hat jedoch nur eine Reducer-Funktion namens Anmeldung das nimmt einen Zustand und eine Aktion als Argumente und gibt einen neuen Zustand zurück.

Die Datei user.js exportiert den Login Reducer. Die Anmeldekomponente importiert es und verwendet es in der useDispatch() Haken.

Erstellen der Anmeldekomponente

importiere React aus 'react';
Importieren Sie den Link von '@mui/material/Link';
Importieren Sie TextField aus '@mui/material/TextField';
Importieren Sie Typografie aus '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import {login} from '../reducers/user';
import { useState } from 'react';
Funktion Anmelden () {
 const Versand = useDispatch()
 const [email, setEmail] = useState('')
 const handleSubmit = () => {
 Versand (login({email: email}))
 }
Rückkehr (


sx={{
mein: 8,
Anzeige: 'flex',
flexDirection: 'Spalte',
alignItems: 'zentrieren',
}}>
 Anmelden 
label="E-Mail-Adresse"
erforderlich
id="E-Mail"
name="email"
Rand="normal"
onChange={(e) => setEmail (e.target.value)}
/>
label="Passwort"
erforderlich
id="Passwort"
name="Passwort"
type="Passwort"
Rand="normal"
/>
href="#"
sx={{mr: 12, mb: 2}}
>
Passwort vergessen?

Variante="enthalten"
sx={{mt: 2}}
onClick={handleSubmit}
>
Anmelden





);
}
Standard-Anmeldung exportieren;

Die obige Anmeldekomponente verwendet die MUI-Bibliothek. Es erstellt ein einfaches Anmeldeformular, das die E-Mail und das Passwort eines Benutzers erfordert. Wenn Sie auf die Schaltfläche zum Anmelden klicken, wird ein onClick-Funktion, die die ruft handleSenden Funktion.

Der handleSenden Funktion verwendet die useState() und useDispact() Haken zusammen mit dem Login-Reduzierer um die E-Mail-Adresse eines aktiven Benutzers im Redux Store verfügbar zu machen. Aus dem Redux Store hat jetzt jede Komponente der React-App Zugriff auf die E-Mail eines aktiven Benutzers.

Verwandt: Hooks: Der Held von React Die folgende aktive Benutzerkomponente ruft die E-Mail-Adresse eines aktiven Benutzers mit Hilfe des useSelector() Hook und rendert es auf der App-Benutzeroberfläche.

Die ActiveUser.js-Datei

importiere Reagieren aus "reagieren";
import { useSelector } from "react-redux";
Funktion ActiveUsers() {
 const user = useSelector((state) => state.user.value)
 Rückkehr (


Aktive Benutzer

 {Benutzer Email} 




 );
}

Die aktualisierte App.js-Datei

Sehen Sie sich diesen Code an:

importiere Reagieren aus "reagieren"; Importieren von ActiveUsers aus "./components/ActiveUsers"; Anmeldung aus "./components/Signin" importieren;
Funktion App() {
Rückkehr ( 
);
}
Standard-App exportieren; 

Der App.js Die obige Datei rendert sowohl die aktiven Benutzer als auch die Anmeldekomponenten in Ihrer React-Anwendung und erzeugt die folgende Ausgabe in Ihrem Browser:

Wenn sich ein Benutzer bei der Anwendung anmeldet, wird die aktive Benutzerkomponente sofort mit einer neuen aktiven Benutzer-E-Mail aktualisiert.

Die aktualisierte Benutzeroberfläche

Wann sollten Sie Redux verwenden?

Redux ist eine der beliebtesten State-Management-Bibliotheken, vor allem, weil es hervorragende Arbeit leistet, vorhersehbaren und zuverlässigen Code zu erstellen. Wenn viele Komponenten in einer Anwendung denselben Anwendungsstatus verwenden, ist Redux die ideale Wahl.

Verwenden Sie das obige Schulbeispiel, die Anmeldekomponente, die aktive Benutzerkomponente, den Kursteilnehmer Komponente, und sogar eine Profilkomponente benötigt die E-Mail-Adresse eines Benutzers (oder eine andere eindeutige Kennung). Aus diesem Grund ist Redux hier die beste Option.

Wenn Sie jedoch einen Zustand haben, der nur von einer oder höchstens zwei Komponenten verwendet wird, sind React-Requisiten möglicherweise eine bessere Option.

So verwenden Sie Requisiten in ReactJS

Wenn Sie Tipps zur Verwendung von Requisiten in ReactJS suchen, sind Sie hier richtig.

Weiter lesen

Über den Autor