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. 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 Slices
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 Speicher gespeichert. Diese Zentralisierung erleichtert das Debuggen und Verfolgen von Änderungen in Ihrer Anwendung.
• Zustand ist schreibgeschützt: Die einzige Möglichkeit, den Zustand 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 eindeutige 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 Slices 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 Store ist das Objekt, das Aktionen und Reduzierer zusammenbringt. Es hält 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 logo.png";

function App() {
  return (
    
      

        
        

          Practice Redux with MusCo
        
        

          
          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

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 
      
Counter
      
{number}
      

         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
        
         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
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            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
          
        
      
       {
        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
      
      

        Counter cannot be less than 0
      
    
  );
}

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 Status als Reaktion auf Aktionen ändert.
• Store: Hält den Status und verarbeitet die Aktionen.
• Anbieter: Übergibt den Store an Ihre React-Komponenten.

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.