Leitfaden zu Redux: Eine robuste Zustandsverwaltungsbibliothek für JavaScript-Anwendungen

Redux ist allgemein als robuste Zustandsverwaltungsbibliothek anerkannt, die speziell für JavaScript-Anwendungen entwickelt wurde und oft zusammen mit dem beliebten Framework React verwendet wird. Durch die Bereitstellung eines zuverlässigen Zustandscontainers schafft Redux eine solide Grundlage, die die Handhabung und Fehlerbehebung von Anwendungszuständen erheblich vereinfacht. Dieser Leitfaden befasst sich eingehend mit den Grundkomponenten von Redux, bietet detaillierte Erklärungen zu jedem Element und veranschaulicht, wie sie synergetisch zusammenarbeiten, um die Gesamtfunktionalität der Anwendung zu optimieren. Ziel dieser eingehenden Untersuchung ist es, das Innenleben von Redux zu erläutern und Entwicklern die Möglichkeit zu geben, die Feinheiten dieses Zustandsverwaltungstools zu verstehen und seine Fähigkeiten effektiv in ihren Projekten zu nutzen.

Inhaltsverzeichnis

1. Einführung in Redux
2. Redux in einer React-Anwendung einrichten
3. Aktionen und Aktionstypen
4. Reduzierer und Scheiben
5. Konfigurieren des Stores
6. React-Komponenten verbinden
7. Fazit und Referenzen

1. Einführung in Redux

Redux folgt einem unidirektionalen Datenflussmodell und basiert auf drei Grundprinzipien:

• Single Source of Truth: Der Status Ihrer gesamten Anwendung wird in einem Objektbaum in einem einzigen Store gespeichert. Diese Zentralisierung erleichtert das Debuggen und Verfolgen von Änderungen in Ihrer gesamten Anwendung.
• Der Status ist schreibgeschützt: Die einzige Möglichkeit, den Status zu ändern, besteht darin, eine Aktion auszugeben, ein Objekt, das beschreibt, was passiert ist. Dadurch wird sichergestellt, dass Zustandsmutationen vorhersehbar und nachvollziehbar sind.
• Änderungen werden mit reinen Funktionen vorgenommen: Um anzugeben, wie der Zustandsbaum durch Aktionen transformiert wird, schreiben Sie reine Reduzierer. Reine Funktionen sind vorhersehbar und testbar, was das Debuggen und Unit-Testen vereinfacht.

2. Einrichten von Redux in einer React-Anwendung

Installieren Sie zunächst Redux und React-Redux:

npm install redux react-redux @reduxjs/toolkit

Dieser Befehl installiert die Redux-Kernbibliothek, die React-Bindungen für Redux und das Redux Toolkit, was viele häufige Aufgaben wie das Einrichten des Stores und das Erstellen von Slices vereinfacht.

3. Aktionen und Aktionstypen

Aktionen sind Nutzlasten von Informationen, die Daten von Ihrer Anwendung an Ihren Redux-Shop senden. Aktionstypen sind Konstanten, die die Aktion darstellen.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

Die klare Definition von Aktionen und Aktionstypen trägt dazu bei, die Konsistenz aufrechtzuerhalten und Fehler in Ihrer Anwendung zu reduzieren.

4. Reduzierer und Slices

Reduzierer geben an, wie sich der Status der Anwendung als Reaktion auf an den Store gesendete Aktionen ändert. Slices sind eine Sammlung von Redux-Reduziererlogik und -Aktionen für ein einzelnes Feature Ihrer App, die mit der createSlice-Methode des Redux Toolkits erstellt wurden.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number += 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number += action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

Um mehrere Scheiben zu kombinieren:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. Konfigurieren des Stores

Der Laden ist das Objekt, das Aktionen und Reduzierer zusammenbringt. Es speichert den Anwendungsstatus, ermöglicht den Zugriff darauf über getState(), aktualisiert ihn über Dispatch(Action) und registriert Listener über subscribe(Listener).

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. React-Komponenten verbinden

Um React-Komponenten mit dem Redux-Store zu verbinden, verwenden Sie die Provider-Komponente von React-Redux, um den Store an Ihre Komponenten weiterzugeben, und verwenden Sie die Hooks „useSelector“ und „useDispatch“, um auf den Status zuzugreifen und ihn zu bearbeiten.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux Leitfaden zu Redux: Eine robuste Zustandsverwaltungsbibliothek für JavaScript-Anwendungen.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Leitfaden zu Redux: Eine robuste Zustandsverwaltungsbibliothek für JavaScript-Anwendungen" classname="w-40 mx-auto mt-24 rounded-full">
        <h1 classname="container m-auto text-2xl font-semibold text-center text-violet-700">
          Practice Redux with <span classname="font-extrabold text-violet-900">MusCo</span>
        </h1>
        <div classname="relative inline-block mt-8 text-sm">
          <counter></counter>
          <h5 classname="absolute bottom-0 right-0 mb-2 mr-2 font-semibold text-violet-700">
            <span classname="italic font-normal">by</span> 
            <span classname="font-semibold text-violet-900">Mus</span>tafa 
            <span classname="font-semibold text-violet-900">Coskuncelebi</span>
          </h5>
        </div>
      </div>
    </provider>
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      <h1 id="Counter">Counter</h1>
      <p classname="text-5xl text-violet-900">{number}</p>
      <div classname="flex mx-8 space-x-5" style="{{" justifycontent:>
        <button onclick="{()"> dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        </button>
        <button onclick="{()"> dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        </button>
      </div>
      <div classname="flex mx-8 mt-5 space-x-3 mb-7" style="{{" justifycontent: alignitems:>
        <div classname="p-5 space-x-5 rounded-md outline outline-1 outline-violet-500">
          <input classname="w-40 h-10 pl-2 rounded-md outline outline-1 outline-violet-500 text-violet-900" onchange="{(e)"> {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
          <button onclick="{()"> {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          </button>
        </div>
      </div>
      <button onclick="{()"> {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      </button>
      <h3 classname="text-violet-400" id="showcase" style="{{" visibility: marginbottom:>
        Counter cannot be less than 0
      </h3>
    
  );
}

export default Counter;

7. Fazit und Referenzen

Redux ist eine leistungsstarke Bibliothek zum Verwalten des Status Ihrer Anwendungen. Indem Sie Aktionen, Reduzierer, den Store verstehen und wissen, wie Sie alles mit Ihren React-Komponenten verbinden, können Sie vorhersehbare und wartbare Anwendungen erstellen.

Wichtige Punkte:

• Aktionen: Definieren Sie, was in Ihrer App passieren soll.
• Reduzierer: Geben Sie an, wie sich der Zustand als Reaktion auf Aktionen ändert.
• Store: Hält den Status und verarbeitet die Aktionen.
• Anbieter: Leitet den Store an Ihre React-Komponenten weiter.

Weitere Informationen finden Sie in der offiziellen Redux-Dokumentation:

• Redux-Dokumentation
• Redux Toolkit-Dokumentation
• React-Redux-Dokumentation

Wenn Sie diesem Leitfaden folgen, sollten Sie ein solides Verständnis von Redux haben und in der Lage sein, es in Ihren eigenen Anwendungen zu implementieren.

Das obige ist der detaillierte Inhalt vonLeitfaden zu Redux: Eine robuste Zustandsverwaltungsbibliothek für JavaScript-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!