Theorie

Om een verbinding tot stand te brengen tussen React-componenten en de Redux-store, kan de useSelector-hook worden gebruikt om de status te benaderen en de useDispatch-hook om acties te dispatchen.

Praktijk

Nu verbinden we de Counter-component met de Redux-store.

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;

Code-uitleg:

• Regel 2: Importeer de benodigde hooks useSelector en useDispatch uit de react-redux-bibliotheek. Deze hooks maken de verbinding tussen React en Redux mogelijk;
• Regel 3: Importeer de action creators increment en decrement uit het bestand ../redux/actions/counterAction. Deze acties worden gedispatched om de counter-status in de Redux-store bij te werken;
• Regel 6: De useSelector-hook wordt gebruikt om toegang te krijgen tot de counter-status uit de Redux-store. Er wordt een selectorfunctie als argument meegegeven, die de gewenste statuswaarde retourneert;
• Regel 7: De useDispatch-hook wordt gebruikt om toegang te krijgen tot de dispatch-functie van Redux. De dispatch-functie wordt gebruikt om acties naar de Redux-store te dispatchen;
• Regel 9-11: Definieer de event handler handleIncrement, die wordt aangeroepen wanneer op de knop "Increment" wordt geklikt. Binnen deze handler wordt de increment-actie naar de Redux-store verstuurd met de dispatch-functie;
• Regel 13-15: Definieer de event handler handleDecrement, die wordt aangeroepen wanneer op de knop "Decrement" wordt geklikt. Binnen deze handler wordt de decrement-actie naar de Redux-store verstuurd met de dispatch-functie;
• Regel 17-23: Render de JSX-elementen, inclusief de huidige counterwaarde en knoppen voor verhogen en verlagen. De respectievelijke event handlers worden gekoppeld aan het onClick-attribuut van de knoppen.

Opmerking

Deze code verbindt een React-component (Counter) met Redux. Er wordt gebruikgemaakt van useSelector om de counter-status te benaderen en van useDispatch om acties te dispatchen voor statusupdates. De component toont de counterwaarde en biedt knoppen om deze te verhogen of te verlagen. Door op deze knoppen te klikken, worden acties getriggerd die de Redux-store bijwerken.