Redux und React Verbinden

Theorie

Um eine Verbindung zwischen React-Komponenten und dem Redux-Store herzustellen, können wir den useSelector-Hook verwenden, um auf den Zustand zuzugreifen, und den useDispatch-Hook, um Aktionen zu versenden.

Übung

Nun verbinden wir die Counter-Komponente mit dem Redux-Store.

Code-Erklärung:

• Zeile 2: Importieren der notwendigen Hooks useSelector und useDispatch aus der react-redux Bibliothek. Diese Hooks ermöglichen die Verbindung zwischen React und Redux;
• Zeile 3: Importieren der increment und decrement Action-Creators aus der ../redux/actions/counterAction Datei. Diese Aktionen werden gesendet, um den Counter-Status im Redux-Store zu aktualisieren;
• Zeile 6: Der useSelector Hook wird verwendet, um auf den counter Status aus dem Redux-Store zuzugreifen. Wir geben eine Selektorfunktion als Argument an, die den gewünschten Statuswert zurückgibt;
• Zeile 7: Der useDispatch Hook wird verwendet, um auf die dispatch Funktion von Redux zuzugreifen. Er bezieht sich auf die dispatch Funktion, die verwendet wird, um Aktionen an den Redux-Store zu senden;
• Zeile 9-11: Definieren des Event-Handlers handleIncrement, der aufgerufen wird, wenn der "Increment"-Button geklickt wird. Wir senden die increment Aktion an den Redux-Store innerhalb des Handlers mit der dispatch Funktion;
• Zeile 13-15: Definieren des Event-Handlers handleDecrement, der aufgerufen wird, wenn der "Decrement"-Button geklickt wird. Wir senden die decrement Aktion innerhalb des Handlers an den Redux-Store mit der dispatch Funktion;
• Zeile 17-23: Rendern der JSX-Elemente, einschließlich des aktuellen Counter-Werts und der Buttons zum Inkrementieren und Dekrementieren. Wir hängen die jeweiligen Event-Handler an das onClick Attribut der Buttons an.

Hinweis

Dieser Code verbindet eine React-Komponente (Counter) mit Redux. Er verwendet useSelector, um auf den Counter-Status zuzugreifen, und useDispatch, um Aktionen für Statusaktualisierungen zu senden. Die Komponente zeigt den Counter-Wert an und bietet Buttons zum Inkrementieren und Dekrementieren. Das Klicken auf diese Buttons löst Aktionen aus, die den Redux-Store aktualisieren.