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

React 16.3.0 a été publié et l’API Context n’est plus une fonctionnalité expérimentale. Dan Abramov (le créateur de Redux) a écrit un bon commentaire à ce sujet, mais cela faisait deux ans que Context était encore une fonctionnalité expérimentale.

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

Comme Context n’est plus une fonctionnalité expérimentale et que vous pouvez utiliser Context directement dans votre application et que vous serez capable de transmettre des données à des composants profondément nesteds pour lesquels il a été conçu.

Comme Mark Erikson a écrit sur son blog :

Si vous utilisez uniquement Redux pour éviter de transmettre des accessoires, le contexte pourrait remplacer Redux – mais vous n’avez probablement pas besoin de Redux.

Le contexte ne vous donne rien non plus que les Redux DevTools , la possibilité de suivre vos mises à jour d’état, le middleware pour append une logique d’application centralisée, et d’autres fonctionnalités puissantes activées par Redux .

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

React Redux utilise le contexte en interne mais ne l’expose pas dans l’API publique. Donc, vous devriez vous sentir beaucoup plus en sécurité en utilisant le contexte via React Redux que directement parce que si cela change, le fardeau de la mise à jour du code sera sur React Redux et pas vous.

C’est jusqu’à Redux de mettre à jour son implémentation pour adhérer à la dernière API de contexte

La dernière API Context peut être utilisée pour les applications où vous utiliseriez simplement Redux pour transmettre des données entre des composants, mais les applications qui utilisent des données centralisées et traitent les requêtes API dans les créateurs d’action utilisant redux-thunk ou redux-saga auraient encore besoin de redux. En dehors de ce redux, d’autres bibliothèques sont associées, comme redux-persist qui vous permettent de sauvegarder les données du magasin dans localStorage et de vous réhydrater lors de l’actualisation.

Comme @dan_abramov mentionné dans son blog, vous pourriez ne pas avoir besoin de Redux , ce redux a une application utile comme

  • Persistez à un stockage local, puis démarrez, hors de la boîte.
  • Pré-remplir l’état sur le serveur, l’envoyer au client en HTML et démarrer à partir de celui-ci.
  • Sérialiser les actions des utilisateurs et les joindre, avec un instantané d’état, aux rapports de bogue automatisés, de sorte que les développeurs de produits
    peut les rejouer pour reproduire les erreurs.
  • Transmettez des objects d’action sur le réseau pour mettre en œuvre des environnements collaboratifs sans modifier radicalement la façon dont le code est écrit.
  • Maintenir un historique des annulations ou implémenter des mutations optimistes sans modifier radicalement la façon dont le code est écrit.
  • Voyagez entre l’historique des états en cours de développement et réévaluez l’état actuel à partir de l’historique des actions lorsque le code change, à la TDD.
  • Fournit des capacités complètes d’inspection et de contrôle aux outils de développement afin que les développeurs de produits puissent créer des outils personnalisés pour leurs outils de développement.
    applications.
  • Fournissez des interfaces utilisateur alternatives tout en réutilisant la plus grande partie 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 Context.

Si vous utilisez Redux uniquement pour éviter de transmettre des accessoires à des composants profondément nesteds , vous pouvez remplacer Redux par l’API Context . Il est exactement destiné à ce cas d’utilisation.

D’autre part, si vous utilisez Redux pour tout le rest (avoir un conteneur d’état prévisible, gérer la logique de votre application en dehors de vos composants, conserver l’historique des mises à jour à l’aide de Redux DevTools , Redux Undo , Redux Persist , Redux Saga , Redux Logger , etc…), vous n’avez absolument aucune raison de remplacer Redux par l’API Context .

Les références:

  • Redux n’est pas encore mort!
  • Vous pourriez ne pas avoir besoin de Redux

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

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

Donc, la question devrait être Context API vs react-redux, et non Context API vs redux. En outre, la question est légèrement discutée. Étant donné que je connais familiar-redux et que je l’utilise dans tous les projets, je continuerai à l’utiliser. (Il n’y a aucune incitation pour moi à changer).

Mais si vous apprenez le redux aujourd’hui et que vous ne l’avez pas utilisé n’importe où, il vaut la peine de donner un coup de pouce à l’API Context et de remplacer react-redux par votre code API Context personnalisé. Peut-être que c’est 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’une sur l’autre car elles sont équivalentes. Et en interne, react-redux utilise de toute façon le contexte.

Les seules raisons d’utiliser Redux pour moi sont:

  • Vous voulez un object d’état global (pour diverses raisons, comme le débogage, la persistance …)
  • Votre application est ou sera grande et devrait évoluer vers de nombreux développeurs: dans ce cas, vous aurez probablement besoin d’un niveau d’indirection (par exemple un système d’événements): vous déclenchez des événements l’organisation peut réellement les écouter

Vous n’avez probablement pas besoin du niveau d’indirection de l’ensemble de votre application, il est donc judicieux de mélanger les styles et d’utiliser simultanément l’état / le contexte local et Redux.