Theorie

Um eine Verbindung zwischen React-Komponenten und dem Redux-Store herzustellen, können der useSelector-Hook zum Zugriff auf den State und der useDispatch-Hook zum Auslösen von Aktionen verwendet werden.

Praxis

Nun wird die Counter-Komponente mit dem Redux-Store verbunden.

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../redux/actions/counterAction";

const Counter = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <h2>Counter Value: {counter}</h2>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Erläuterung des Codes:

• Zeile 2: Import der benötigten Hooks useSelector und useDispatch aus der Bibliothek react-redux. Diese Hooks ermöglichen die Verbindung zwischen React und Redux;
• Zeile 3: Import der Action Creator increment und decrement aus der Datei ../redux/actions/counterAction. Diese Aktionen werden ausgelöst, um den Counter-State im Redux-Store zu aktualisieren;
• Zeile 6: Der useSelector-Hook wird verwendet, um auf den counter-State aus dem Redux-Store zuzugreifen. Es wird eine Selektorfunktion als Argument übergeben, die den gewünschten State-Wert zurückgibt;
• Zeile 7: Der useDispatch-Hook wird verwendet, um auf die dispatch-Funktion von Redux zuzugreifen. Sie verweist auf die dispatch-Funktion, mit der Aktionen an den Redux-Store ausgelöst werden;
• Zeile 9-11: Definition des Event-Handlers handleIncrement, der beim Klick auf den "Increment"-Button aufgerufen wird. Innerhalb des Handlers wird die increment-Aktion mit der dispatch-Funktion an den Redux-Store ausgelöst;
• Zeile 13-15: Definition des Event-Handlers handleDecrement, der beim Klick auf den "Decrement"-Button aufgerufen wird. Die decrement-Aktion wird innerhalb des Handlers mit der dispatch-Funktion an den Redux-Store ausgelöst;
• Zeile 17-23: Rendern der JSX-Elemente, einschließlich des aktuellen Counter-Werts und der Buttons zum Erhöhen und Verringern. Die jeweiligen Event-Handler werden an das onClick-Attribut der Buttons gebunden.

Hinweis

Dieser Code verbindet eine React-Komponente (Counter) mit Redux. Es wird useSelector verwendet, um auf den Counter-State zuzugreifen, und useDispatch, um Aktionen zur Aktualisierung des States auszulösen. Die Komponente zeigt den Counter-Wert an und stellt Buttons zum Erhöhen und Verringern bereit. Das Klicken auf diese Buttons löst Aktionen aus, die den Redux-Store aktualisieren.