Teoria

Para estabelecer uma conexão entre componentes React e o store do Redux, pode-se utilizar o hook useSelector para acessar o estado e o hook useDispatch para despachar ações.

Prática

Agora, conecte o componente Counter ao store do 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;

Explicação do código:

• Linha 2: Importação dos hooks necessários useSelector e useDispatch da biblioteca react-redux. Esses hooks permitem a conexão entre React e Redux;
• Linha 3: Importação dos criadores de ação increment e decrement do arquivo ../redux/actions/counterAction. Essas ações serão despachadas para atualizar o estado do contador no store do Redux;
• Linha 6: O hook useSelector é utilizado para acessar o estado counter do store do Redux. Uma função seletora é fornecida como argumento, retornando o valor de estado desejado;
• Linha 7: O hook useDispatch é utilizado para acessar a função dispatch do Redux. Refere-se à função dispatch, que é usada para despachar ações ao store do Redux;
• Linhas 9-11: Definição do manipulador de evento handleIncrement, chamado quando o botão "Increment" é clicado. A ação increment é despachada para o store do Redux dentro do manipulador usando a função dispatch;
• Linhas 13-15: Definição do manipulador de evento handleDecrement, chamado quando o botão "Decrement" é clicado. A ação decrement é despachada dentro do manipulador para o store do Redux usando a função dispatch;
• Linhas 17-23: Renderização dos elementos JSX, incluindo o valor atual do contador e botões para incrementar e decrementar. Os respectivos manipuladores de evento são atribuídos ao atributo onClick dos botões.

Nota

Este código conecta um componente React (Counter) ao Redux. Utiliza useSelector para acessar o estado do contador e useDispatch para despachar ações de atualização de estado. O componente exibe o valor do contador e fornece botões para incrementá-lo e decrementá-lo. Ao clicar nesses botões, ações são disparadas para atualizar o store do Redux.