Teoria

React-komponenttien ja Redux-kaupan yhdistämiseksi voidaan käyttää useSelector-hookia tilan lukemiseen ja useDispatch-hookia toimintojen lähettämiseen.

Käytännön esimerkki

Seuraavaksi yhdistetään Counter-komponentti Redux-kauppaan.

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;

Koodin selitys:

• Rivi 2: Tuodaan tarvittavat hookit useSelector ja useDispatch react-redux-kirjastosta. Näiden hookien avulla yhdistetään React ja Redux;
• Rivi 3: Tuodaan increment- ja decrement-toimintojen luojat tiedostosta ../redux/actions/counterAction. Näitä toimintoja käytetään laskurin tilan päivittämiseen Redux-kaupassa;
• Rivi 6: useSelector-hookilla luetaan counter-tila Redux-kaupasta. Argumenttina annetaan valintafunktio, joka palauttaa halutun tilan arvon;
• Rivi 7: useDispatch-hookilla saadaan käyttöön Reduxin dispatch-funktio. Se viittaa dispatch-funktioon, jota käytetään toimintojen lähettämiseen Redux-kauppaan;
• Rivit 9–11: Määritellään tapahtumankäsittelijä handleIncrement, joka kutsutaan, kun "Increment"-painiketta painetaan. Toiminto increment lähetetään Redux-kauppaan dispatch-funktiolla;
• Rivit 13–15: Määritellään tapahtumankäsittelijä handleDecrement, joka kutsutaan, kun "Decrement"-painiketta painetaan. Toiminto decrement lähetetään Redux-kauppaan dispatch-funktiolla;
• Rivit 17–23: Renderöidään JSX-elementit, mukaan lukien nykyinen laskurin arvo sekä painikkeet arvon kasvattamiseen ja pienentämiseen. Tapahtumankäsittelijät liitetään painikkeiden onClick-attribuutteihin.

Huomio

Tämä koodi yhdistää React-komponentin (Counter) Reduxtiin. Se käyttää useSelector-hookia laskurin tilan lukemiseen ja useDispatch-hookia toimintojen lähettämiseen tilan päivityksiä varten. Komponentti näyttää laskurin arvon ja tarjoaa painikkeet arvon kasvattamiseen ja pienentämiseen. Painikkeiden painaminen laukaisee toiminnot, jotka päivittävät Redux-kaupan.