Teoria

Per stabilire una connessione tra i componenti React e lo store Redux, è possibile utilizzare l'hook useSelector per accedere allo stato e l'hook useDispatch per inviare azioni.

Pratica

Ora colleghiamo il componente Counter allo store Redux.

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;

Spiegazione del codice:

• Riga 2: Importazione degli hook necessari useSelector e useDispatch dalla libreria react-redux. Questi hook consentono la connessione tra React e Redux;
• Riga 3: Importazione dei creator di azioni increment e decrement dal file ../redux/actions/counterAction. Queste azioni verranno inviate per aggiornare lo stato del contatore nello store Redux;
• Riga 6: L'hook useSelector viene utilizzato per accedere allo stato counter dallo store Redux. Si fornisce una funzione selettore come argomento, che restituisce il valore di stato desiderato;
• Riga 7: L'hook useDispatch viene utilizzato per accedere alla funzione dispatch di Redux. Si riferisce alla funzione dispatch, che viene utilizzata per inviare azioni allo store Redux;
• Riga 9-11: Definizione del gestore di eventi handleIncrement che viene chiamato quando si clicca il pulsante "Increment". All'interno del gestore, si invia l'azione increment allo store Redux utilizzando la funzione dispatch;
• Riga 13-15: Definizione del gestore di eventi handleDecrement che viene chiamato quando si clicca il pulsante "Decrement". All'interno del gestore, si invia l'azione decrement allo store Redux utilizzando la funzione dispatch;
• Riga 17-23: Rendering degli elementi JSX, inclusi il valore attuale del contatore e i pulsanti per incrementare e decrementare. Si associano i rispettivi gestori di eventi all'attributo onClick dei pulsanti.

Nota

Questo codice collega un componente React (Counter) a Redux. Utilizza useSelector per accedere allo stato del contatore e useDispatch per inviare azioni di aggiornamento dello stato. Il componente mostra il valore del contatore e fornisce pulsanti per incrementare e decrementare. Cliccando su questi pulsanti vengono attivate azioni che aggiornano lo store Redux.