React Context vs React Redux, quand dois-je utiliser chacun d'eux ?

Question

React 16.3.0 est sorti et le Contexte L'API n'est plus une fonctionnalité expérimentale. Dan Abramov (le créateur de Redux) a écrit un bon commentaire aquí à ce sujet, mais c'était il y a 2 ans quand Context était encore une fonctionnalité expérimentale.

Ma question est la suivante : à votre avis/expérience, quand dois-je utiliser Contexte React sur React Redux et vice versa ?

Answer 1

Comme Contexte n'est plus une fonctionnalité expérimentale et vous pouvez utiliser Context directement dans votre application. Il sera idéal pour transmettre des données à des composants profondément imbriqués, ce pour quoi il a été conçu.

Comme l'a écrit Mark Erikson dans son livre intitulé blog :

Si vous utilisez Redux uniquement pour éviter de transmettre des props, le contexte pourrait remplacer Redux - mais alors vous n'avez probablement pas besoin de Redux en premier lieu d'abord.

Le contexte ne vous donne pas non plus quelque chose comme le Redux DevTools la la possibilité de tracer vos mises à jour d'état, middleware pour ajouter centralisé logique d'application centralisée, et d'autres capacités puissantes qui Redux permet.

Redux est beaucoup plus puissant et fournit un grand nombre de fonctionnalités que le Context API ne fournit pas, également comme @danAbramov mentionné

React Redux utilise le contexte en interne, mais il n'expose pas ce fait dans l'API publique. Ainsi, vous devriez vous sentir beaucoup plus en sécurité en utilisant le contexte via React Redux que directement, car s'il change, le fardeau de la mise à jour du code sera sur React Redux et non sur vous.

C'est à Redux de mettre à jour son implémentation pour adhérer à la dernière API Contexte.

La dernière API contextuelle peut être utilisée pour les applications dans lesquelles vous utilisez simplement Redux pour transmettre des données entre les composants. Cependant, les applications qui utilisent des données centralisées et traitent les demandes d'API dans les créateurs d'actions en utilisant l'API contextuelle sont plus efficaces. redux-thunk o redux-saga aurait encore besoin de Redux. En dehors de cela, Redux a d'autres bibliothèques associées à lui comme redux-persist qui vous permet de sauvegarder/stocker des données dans localStorage et de les réhydrater lors de l'actualisation, ce que l'API Contexte ne prend toujours pas en charge.

Comme @dan_abramov l'a mentionné dans son blog Vous n'avez peut-être pas besoin de Redux Redux a des applications utiles comme

• Persistez l'état sur un stockage local et démarrez à partir de celui-ci, dès le départ.
• Pré-remplir l'état sur le serveur, l'envoyer au client en HTML, et démarrer à partir de celui-ci, tout de suite.
• Sérialiser les actions de l'utilisateur et les joindre, avec un instantané de l'état, aux rapports de bogues automatisés, afin que les développeurs du produit
  peut les rejouer pour reproduire les erreurs.
• Faites passer des objets d'action sur le réseau pour mettre en place des environnements collaboratifs sans modifier radicalement la façon dont le code est écrit.
• Maintenir un historique d'annulation ou mettre en œuvre des mutations optimistes sans modifier radicalement la façon dont le code est écrit.
• Voyagez entre l'historique des états dans le développement, et réévaluez > l'état actuel à partir de l'historique des actions lorsque le code change, ala TDD.
• Fournir des capacités complètes d'inspection et de contrôle à l'outil de développement afin que les développeurs de produits puissent créer des outils personnalisés pour leurs applications.
• Fournir des interfaces utilisateur alternatives tout en réutilisant la plupart de la logique métier.

Avec ces nombreuses applications, il est beaucoup trop tôt pour dire que Redux sera remplacé par la nouvelle API Contexte.

Answer 2

Si vous utilisez Redux uniquement pour éviter de transmettre des props à des composants profondément imbriqués. alors vous pouvez remplacer Redux par le Context API. Elle est exactement destinée à ce cas d'utilisation.

D'un autre côté, si vous utilisez Redux pour tout le reste (disposer d'un conteneur d'état prévisible, gérer la logique de votre application en dehors de vos composants, centraliser l'état de votre application, utiliser des outils de gestion de l'état de l'application, etc. Outils de développement Redux pour savoir quand, où, pourquoi et comment l'état de votre application a changé, ou en utilisant des plugins tels que Formulaire Redux , Saga Redux , Redux Undo , Redux Persiste , Enregistreur Redux etc ), alors il n'y a absolument aucune raison pour vous d'abandonner Redux. Le site Context L'API ne fournit rien de tout cela.

Et je crois personnellement que l'extension Redux DevTools est un outil de débogage étonnant et sous-estimé, qui justifie à lui seul de continuer à utiliser Redux.

Quelques références :

• Redux n'est pas encore mort !
• Vous n'avez peut-être pas besoin de Redux
• Les crochets de React remplacent-ils Redux ?

Answer 3

Je préfère utiliser redux avec redux-thunk pour faire des appels d'API (en utilisant également Axios) et distribuer la réponse aux réducteurs. C'est propre et facile à comprendre.

L'API contextuelle est très spécifique à la partie react-redux sur la façon dont les composants React sont connectés au magasin. Pour cela, react-redux est bon. Mais si vous le souhaitez, puisque Context est officiellement pris en charge, vous pouvez utiliser l'API Context au lieu de react-redux.

La question devrait donc être API contextuelle vs react-redux, et non API contextuelle vs redux. En outre, la question est légèrement subjective. Puisque je connais bien react-redux et que je l'utilise dans tous mes projets, je vais continuer à l'utiliser. (Il n'y a aucune raison pour moi de changer).

Mais si vous n'apprenez redux qu'aujourd'hui et que vous ne l'avez jamais utilisé, cela vaut la peine d'essayer l'API contextuelle et de remplacer react-redux par votre code API contextuelle personnalisé. C'est peut-être beaucoup plus propre de cette façon.

Personnellement, c'est une question de familiarité. Il n'y a pas de raison claire de choisir l'un plutôt que l'autre car ils sont équivalents. Et en interne, react-redux utilise Context de toute façon.

Answer 4

Les seules raisons d'utiliser Redux pour moi sont :

• Vous voulez un objet d'état global (pour diverses raisons, comme la déboguabilité, la persistance...).
• Votre application est ou sera de grande taille, et doit pouvoir être mise à l'échelle par de nombreux développeurs : dans ce cas, vous avez probablement besoin d'un niveau d'indirection (c'est-à-dire d'un système d'événements) : vous déclenchez des événements (dans le passé), puis des personnes que vous ne connaissez pas dans votre organisation peuvent les écouter.

Vous n'avez probablement pas besoin de ce niveau d'indirection pour l'ensemble de votre application, il est donc tout à fait possible de mélanger les styles et d'utiliser l'état/contexte local et Redux en même temps.

Answer 5

• Si vous devez utiliser un intergiciel à des fins diverses. Par exemple, la journalisation des actions, le signalement des erreurs, l'envoi d'autres requêtes en fonction de la réponse du serveur, etc. de la réponse du serveur, etc.
• Lorsque des données provenant de plusieurs points de terminaison influencent un seul composant/une seule vue.
• Lorsque vous voulez avoir un meilleur contrôle sur les actions dans vos applications. Redux permet de suivre les actions et les changements de données, il g
• Si vous ne voulez pas que la réponse du serveur modifie directement l'état de votre application. Redux ajoute une couche, où vous pouvez décider comment, quand et si ces données doivent être appliquées. Le modèle de l'observateur. Au lieu de de créer de multiples éditeurs et abonnés à travers toute l'application, vous connectez simplement les composants au magasin Redux.

De : Quand utiliser Redux ?