Master Redux: Ein einfacher Leitfaden für React-Entwickler

Redux ist weithin 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. In diesem Leitfaden werden wir uns eingehend mit den grundlegenden Komponenten von Redux befassen, detaillierte Erklärungen zu jedem Element geben und veranschaulichen, 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

• Einführung in Redux

• Redux in einer React-Anwendung einrichten

• Aktionen und Aktionstypen

• Reduzierer und Scheiben

• Konfigurieren des Stores

• React-Komponenten verbinden

• 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 reagieren-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;

rootReducer.js

Um mehrere Scheiben zu kombinieren:

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 Master Redux: Ein einfacher Leitfaden für React-Entwickler.png";

function App() {
  return (
    <provider store="{store}">
      <div classname="container mx-auto mt-24 text-center">
        <img src="%7BMusCo%7D" alt="Master Redux: Ein einfacher Leitfaden für React-Entwickler" 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">Co</span>skuncelebi
          </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 classname="mb-3 text-3xl font-bold mt-7 
        text-violet-700">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();
            }
            // Check the trimmed value consists only of digits
            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: Übergibt den Store an Ihre React-Komponenten.

Projektdateien:

Hier können Sie auf die in meinem GitHub-Repository gespeicherten Projektdateien zugreifen.
Redux-Zähler

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.

Viel Spaß beim Codieren!

veröffentlicht auf Hashnode und Medium

Das obige ist der detaillierte Inhalt vonMaster Redux: Ein einfacher Leitfaden für React-Entwickler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!