Lectura del Estado con useSelector

Para utilizar datos del store dentro de un componente, se leen con useSelector. Este hook permite que tu componente acceda al estado actual.

Lectura del estado

Dentro de un componente, llama a useSelector y retorna la parte del estado que necesitas:

import { useSelector } from 'react-redux';

function Counter() {
  const value = useSelector((state) => state.counter.value);

  return <p>{value}</p>;
}

La función recibe el estado completo del store, y seleccionas solo lo que necesitas.

Importancia de este enfoque

Los componentes no deben depender de todo el estado. Al seleccionar solo una pequeña parte, los componentes se mantienen simples y fáciles de mantener.

El componente se actualizará automáticamente cuando cambie el estado seleccionado. No es necesario activar actualizaciones manualmente.