Quand utiliser le crochet natif React.useReducer et comment il se différencie de Redux

Question

Ainsi, les crochets sont disponibles à partir de React 16.8. D'après leur documentation, les crochets se présentent comme un remplaçant d'état dans les composants fonctionnels. Les crochets de base sont: useState, useEffect, useContext, mais il existe également des crochets supplémentaires, l'un d'eux étant useReducer, et il semble qu'il utilise le même action-dispatch architecture comme Redux.

Les questions seraient de savoir s'il s'agit d'un remplacement de Redux en raison de la ressemblance?

Convient-il mieux à des projets particuliers?

Où cela irait-il?

Answer 1

Redux est une bibliothèque qui encourage le flux de données d'une manière spécifique.

react-redux, d'autre part, implémente l'approche conviviale React et fournit de nombreux middlewares et wrappers pour que les consommateurs de la bibliothèque n'aient pas à configurer l'ensemble du processus par eux-mêmes.

Bien que useReducer fasse partie du fonctionnement de Redux, ce n'est pas Redux dans son intégralité. Pour que vous puissiez utiliser la répartition et l'état au plus profond de vos composants, vous devrez toujours utiliser useContext et useReducer dans une combinaison qui reviendrait à réinventer la roue.

En plus de cela, useReducer vous donne juste une méthode dispatch que vous pouvez utiliser pour distribuer de vieux objets simples sous forme d'actions. Il n'y a pas encore de moyen d'ajouter middlewares à ceux-ci comme thunk, saga et bien d'autres.

Vous pouvez également avoir plusieurs réducteurs dans votre application en utilisant useReducer mais la manière de les combiner pour former un seul magasin doit encore être gérée par le développeur.

React docs indique également que useReducer est une alternative à useState lorsque la logique d'état est complexe

useReducer est généralement préférable à useState lorsque vous avez une logique d'état complexe qui implique plusieurs sous-valeurs ou lorsque l'état suivant dépend du précédent. useReducer vous permet également d'optimiser les performances des composants qui déclenchent des mises à jour approfondies, car vous pouvez transmettre la répartition au lieu des rappels.

Ce que les hooks comme useContext, useReducer font, c'est qu'ils éliminent la dépendance à Redux pour les petites applications.

Answer 2

Donc, si Redux et useReducer devaient être comparés

Redux:

• état centralisé
• forge plus de découplage
• a des middlewares: Thunk Redux et enregistreur Redux
• les actions ne peuvent toucher qu'un seul magasin
• peut-être plus adapté aux grands projets

useReducer:

• état local
• aucun composant wrapper
• a besoin de useContext pour réinventer la roue
• est livré avec d'autres crochets natifs
• pas de dépendances supplémentaires nécessaires
• plusieurs magasins peut-être (en fait des réducteurs qui peuvent servir de magasin)
• peut-être plus adapté aux petits projets

Answer 3

L'état de useReducer est local à un seul composant - si vous souhaitez utiliser cet état dans votre application, vous devez le transmettre (et/ou la fonction dispatch) via les accessoires. C'est en fait juste une version plus structurée de useState - en fait, useState est implémenté en utilisant useReducer sous le capot !

Redux, d'autre part, fait un peu plus - entre autres, il rend l'état disponible à l'ensemble de l'application via un contexte, puis fournit des API pour connecter vos composants profondément imbriqués à cet état sans passer par des accessoires.

En d'autres termes:

• useReducer vous donne des mises à jour structurées locales de l'état.
• Redux vous offre des mises à jour d'état structurées et centralisées .

Si vous vouliez "rouler votre propre Redux" avec des crochets, vous devez utiliser une combinaison de useReducer et useContext.