Teori

For å etablere en kobling mellom React-komponenter og Redux-butikken, kan vi bruke useSelector-hooken for å få tilgang til tilstanden og useDispatch-hooken for å sende handlinger.

Praksis

Nå skal vi koble Counter-komponenten til Redux-butikken.

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: Importer nødvendige hooks useSelector og useDispatch fra react-redux-biblioteket. Disse hookene muliggjør koblingen mellom React og Redux;
• Linje 3: Importer increment og decrement action creators fra ../redux/actions/counterAction-filen. Disse handlingene vil bli sendt for å oppdatere counter-tilstanden i Redux-butikken;
• Linje 6: useSelector-hooken brukes for å få tilgang til counter-tilstanden fra Redux-butikken. Vi gir en selector-funksjon som argument, som returnerer ønsket tilstandsverdi;
• Linje 7: useDispatch-hooken brukes for å få tilgang til Redux sin dispatch-funksjon. Den refererer til dispatch-funksjonen, som brukes for å sende handlinger til Redux-butikken;
• Linje 9-11: Definerer event handler handleIncrement som kalles når "Increment"-knappen trykkes. Vi sender increment-handlingen til Redux-butikken inne i handleren ved å bruke dispatch-funksjonen;
• Linje 13-15: Definerer event handler handleDecrement som kalles når "Decrement"-knappen trykkes. Vi sender decrement-handlingen til Redux-butikken inne i handleren ved å bruke dispatch-funksjonen;
• Linje 17-23: Gjengir JSX-elementene, inkludert gjeldende counter-verdi og knapper for å øke og redusere. Vi knytter de respektive event handlerne til knappenes onClick-attributt.

Merk

Denne koden kobler en React-komponent (Counter) til Redux. Den bruker useSelector for å få tilgang til counter-tilstanden og useDispatch for å sende handlinger for tilstandsoppdateringer. Komponentet viser counter-verdien og gir knapper for å øke og redusere den. Ved å trykke på disse knappene utløses handlinger som oppdaterer Redux-butikken.