React useReducer expliqué : quand et pourquoi l’utiliser à la place de useState

Appuyez sur Entrée ou cliquez pour afficher l’image en taille réelle

La centrale silencieuse : pourquoi useReducer C’est peut-être le hook React le plus sous-estimé que vous n’avez jamais utilisé

Quand vous pensez aux hooks React, useState et useEffect me vient immédiatement à l’esprit. Ce sont les bêtes de somme des composants fonctionnels indispensables à la gestion de la maladie et des effets secondaires. Mais et si je vous disais qu’il existe un autre hook intégré, souvent caché dans l’ombre, qui peut grandement simplifier la gestion de votre état pour des scénarios plus complexes ?

Se connecter useReducer.

De nombreux développeurs, en particulier ceux qui découvrent React, ont du mal à atteindre useState pour presque tous les besoins de l’État. Et pour un état simple (comme un interrupteur logique ou un compteur) c’est useState tout à fait normal. Mais à mesure que la logique d’état de votre composant grandit, vous vous retrouverez à écrire plusieurs useState appels et fonctions de mise à jour complexes, il useReducer devient une alternative plus élégante, facile à entretenir et puissante.

Qu’y a-t-il useReducer? (Ce n’est pas aussi effrayant que ça en a l’air !)

À la base, c’est useReducer est une alternative useState pour gérer l’État. Ceci est conceptuellement similaire au modèle de gestion d’état trouvé dans Redux (d’où le « réducteur » dans son nom). Il faut deux arguments :

1. reducer fonction: Cette fonction pure prend…