Uso de Hooks de Redux: useSelector y useDispatch

¿Cómo se conecta un componente a Redux utilizando hooks?

Conectar un componente a Redux puede simplificar considerablemente el código gracias al uso de hooks. Anteriormente, se utilizaba el método connect, que involucraba la creación de mapas de estado y despachos a propiedades (mapStateToProps y mapDispatchToProps), así como un envoltorio de nuestro componente. Ahora, usando hooks, podemos lograr el mismo resultado con solo dos líneas de código.

¿Cuáles son las diferencias entre connect y hooks en Redux?

El uso del método connect requiere más código porque implica lo siguiente:

• Crear mapStateToProps y mapDispatchToProps.
• Utilizar un componente de orden superior (HighOrderComponent) que renderiza nuestro componente.
• Probar componentes es más sencillo ya que el estado y los despachos se pasan como props.

En cambio, los hooks ofrecen las siguientes ventajas:

• Reducen el código necesario.
• Mejoran la experiencia de desarrollo.
• Mayor compatibilidad con herramientas como TypeScript.
• Redux recomienda usar su API de hooks por estas razones.

¿Cuáles son los principales hooks de Redux?

Redux ofrece dos hooks esenciales para manejar el estado:

1. useSelector: Extrae la data del estado mediante una función selectora pura que suscribe el componente al estado. Se llama cada vez que se produce una acción que puede cambiar el valor, permitiendo rerenderizar el componente según sea necesario.

2. useDispatch: Retorna una referencia al dispatcher de Redux, utilizado para disparar acciones.

¿Cómo pasar de usar connect a hooks en un proyecto de Redux?

Implementar hooks en un proyecto que previamente usaba connect se puede lograr siguiendo estos pasos:

1. Limpieza de Código:

   • Eliminar parámetros y elementos utilizados en mapStateToProps y mapDispatchToProps.
   • Limpiar imports no utilizados y simplificar el código.

2. Implementación de Hooks:

   • Importar useSelector y useDispatch desde React Redux.
   • Usar useSelector para acceder y guardar el estado necesario en una variable.
   • Utilizar useDispatch para obtener el dispatcher y gestionar acciones.

Ejemplo de código de cómo hacerlo

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { setPokemon } from './actions';

const PokemonComponent = () => {
  const pokemonList = useSelector(state => state.pokemonList);
  const dispatch = useDispatch();

  const handleSetPokemon = () => {
    dispatch(setPokemon());
  };

  return (
    <div>
      {pokemonList.map(pokemon => (
        <div key={pokemon.id}>{pokemon.name}</div>
      ))}
      <button onClick={handleSetPokemon}>Set Pokémon</button>
    </div>
  );
};

export default PokemonComponent;

Con este enfoque, puedes ver cómo se mantiene la funcionalidad original con una notable reducción de código y una experiencia de desarrollo más intuitiva. Sin duda, los hooks son una poderosa herramienta que redefine la forma en que interactuamos con Redux, animándote a adoptarlos en futuros proyectos.