Teoría

Para establecer una conexión entre los componentes de React y el store de Redux, se puede utilizar el hook useSelector para acceder al estado y el hook useDispatch para enviar acciones.

Práctica

Ahora, conectemos el componente Counter al store de 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;

Explicación del código:

• Línea 2: Importar los hooks necesarios useSelector y useDispatch de la librería react-redux. Estos hooks permiten la conexión entre React y Redux;
• Línea 3: Importar los creadores de acciones increment y decrement desde el archivo ../redux/actions/counterAction. Estas acciones se enviarán para actualizar el estado del contador en el store de Redux;
• Línea 6: El hook useSelector se utiliza para acceder al estado counter del store de Redux. Se proporciona una función selectora como argumento, que retorna el valor de estado deseado;
• Línea 7: El hook useDispatch se utiliza para acceder a la función dispatch de Redux. Hace referencia a la función dispatch, que se utiliza para enviar acciones al store de Redux;
• Líneas 9-11: Definir el manejador de eventos handleIncrement que se llama cuando se hace clic en el botón "Increment". Se envía la acción increment al store de Redux dentro del manejador usando la función dispatch;
• Líneas 13-15: Definir el manejador de eventos handleDecrement que se llama cuando se hace clic en el botón "Decrement". Se envía la acción decrement dentro del manejador al store de Redux usando la función dispatch;
• Líneas 17-23: Renderizar los elementos JSX, incluyendo el valor actual del contador y los botones para incrementar y decrementar. Se asignan los respectivos manejadores de eventos al atributo onClick de los botones.

Nota

Este código conecta un componente de React (Counter) con Redux. Utiliza useSelector para acceder al estado del contador y useDispatch para enviar acciones que actualizan el estado. El componente muestra el valor del contador y proporciona botones para incrementarlo y decrementarlo. Al hacer clic en estos botones se disparan acciones que actualizan el store de Redux.