Forbinder Redux med React-Komponenter

Teori

For at etablere en forbindelse mellem React-komponenter og Redux store, kan vi bruge useSelector-hooken til at tilgå staten og useDispatch-hooken til at sende handlinger.

Praksis

Nu tilkobles Counter-komponenten til 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;

Kodeforklaring:

• Linje 2: Import af de nødvendige hooks useSelector og useDispatch fra react-redux-biblioteket. Disse hooks muliggør forbindelsen mellem React og Redux;
• Linje 3: Import af action creators increment og decrement fra filen ../redux/actions/counterAction. Disse handlinger sendes for at opdatere counter-state i Redux store;
• Linje 6: useSelector-hooken bruges til at tilgå counter-state fra Redux store. En selector-funktion gives som argument, som returnerer den ønskede state-værdi;
• Linje 7: useDispatch-hooken bruges til at tilgå Redux' dispatch-funktion. Den refererer til dispatch-funktionen, som bruges til at sende handlinger til Redux store;
• Linje 9-11: Definerer event handleren handleIncrement, som kaldes, når "Increment"-knappen trykkes. increment-handlingen sendes til Redux store inde i handleren ved brug af dispatch-funktionen;
• Linje 13-15: Definerer event handleren handleDecrement, som kaldes, når "Decrement"-knappen trykkes. decrement-handlingen sendes til Redux store inde i handleren ved brug af dispatch-funktionen;
• Linje 17-23: Renderer JSX-elementerne, inklusive den aktuelle counter-værdi og knapper til at øge og mindske værdien. De respektive event handlers tilknyttes knappernes onClick-attribut.

Bemærk

Denne kode forbinder en React-komponent (Counter) til Redux. Den bruger useSelector til at tilgå counter-state og useDispatch til at sende handlinger for opdatering af state. Komponenten viser counter-værdien og tilbyder knapper til at øge og mindske den. Når disse knapper trykkes, udløses handlinger, der opdaterer Redux store.