Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Redux mit React-Komponenten Verbinden | Anwendung von Redux Toolkit in React
State Management mit Redux Toolkit in React

bookRedux mit React-Komponenten Verbinden

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.

1. Wie wird eine Verbindung zwischen React-Komponenten und dem Redux-Store hergestellt, um auf den Zustand zuzugreifen?

2. Welchen Zweck erfüllt der useSelector-Hook im Code?

3. Was bewirkt die Funktion handleDecrement, wenn sie aufgerufen wird?

question mark

Wie wird eine Verbindung zwischen React-Komponenten und dem Redux-Store hergestellt, um auf den Zustand zuzugreifen?

Select the correct answer

question mark

Welchen Zweck erfüllt der useSelector-Hook im Code?

Select the correct answer

question mark

Was bewirkt die Funktion handleDecrement, wenn sie aufgerufen wird?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 9

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 4.17

bookRedux mit React-Komponenten Verbinden

Swipe um das Menü anzuzeigen

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.

1. Wie wird eine Verbindung zwischen React-Komponenten und dem Redux-Store hergestellt, um auf den Zustand zuzugreifen?

2. Welchen Zweck erfüllt der useSelector-Hook im Code?

3. Was bewirkt die Funktion handleDecrement, wenn sie aufgerufen wird?

question mark

Wie wird eine Verbindung zwischen React-Komponenten und dem Redux-Store hergestellt, um auf den Zustand zuzugreifen?

Select the correct answer

question mark

Welchen Zweck erfüllt der useSelector-Hook im Code?

Select the correct answer

question mark

Was bewirkt die Funktion handleDecrement, wenn sie aufgerufen wird?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 9
some-alt