Teori

För att etablera en koppling mellan React-komponenter och Redux-butiken kan vi använda hooken useSelector för att komma åt tillståndet och hooken useDispatch för att skicka åtgärder.

Praktik

Nu ska vi koppla Counter-komponenten till Redux-butiken.

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;

Kodförklaring:

• Rad 2: Importera de nödvändiga hookarna useSelector och useDispatch från biblioteket react-redux. Dessa hookar möjliggör kopplingen mellan React och Redux;
• Rad 3: Importera åtgärdsskaparna increment och decrement från filen ../redux/actions/counterAction. Dessa åtgärder skickas för att uppdatera counter-tillståndet i Redux-butiken;
• Rad 6: Hooken useSelector används för att komma åt counter-tillståndet från Redux-butiken. Vi tillhandahåller en selektorfunktion som argument, vilken returnerar önskat tillståndsvärde;
• Rad 7: Hooken useDispatch används för att komma åt Redux-funktionen dispatch. Den refererar till funktionen dispatch, som används för att skicka åtgärder till Redux-butiken;
• Rad 9-11: Definiera eventhanteraren handleIncrement som anropas när knappen "Increment" klickas. Vi skickar åtgärden increment till Redux-butiken inuti hanteraren med hjälp av funktionen dispatch;
• Rad 13-15: Definiera eventhanteraren handleDecrement som anropas när knappen "Decrement" klickas. Vi skickar åtgärden decrement till Redux-butiken inuti hanteraren med hjälp av funktionen dispatch;
• Rad 17-23: Rendera JSX-elementen, inklusive det aktuella counter-värdet och knappar för att öka och minska. Vi kopplar respektive eventhanterare till knapparnas onClick-attribut.

Notera

Denna kod kopplar en React-komponent (Counter) till Redux. Den använder useSelector för att komma åt counter-tillståndet och useDispatch för att skicka åtgärder för tillståndsuppdateringar. Komponentens uppgift är att visa counter-värdet och tillhandahålla knappar för att öka och minska det. När dessa knappar klickas skickas åtgärder som uppdaterar Redux-butiken.