React Context vs React Redux, quand devrais-je utiliser chacun d'eux?
React 16.3.0 a été publié et l'API Contexte n'est plus une fonctionnalité expérimentale. Dan Abramov (le créateur de Redux) a écrit un bon commentaire ici à ce sujet, mais cela faisait 2 ans que Context était encore une fonctionnalité expérimentale.
Ma question est, à votre avis/expérience quand dois-je utiliser Contexte de réaction sur Réagir Redux et vice versa?
En tant que , le contexte n'est plus une fonctionnalité expérimentale. Vous pouvez utiliser le contexte directement dans votre application et il sera très utile pour la transmission de données à des composants profondément imbriqués, qui ce pour quoi il a été conçu.
Comme Mark erikson a écrit dans son blog :
Si vous n'utilisez que Redux pour éviter de transmettre des accessoires, le contexte pourrait remplacer Redux - mais vous n'avez probablement pas besoin de Redux au départ.
De plus, le contexte ne vous donne rien comme le
Redux DevTools, la possibilité de suivre vos mises à jour d'état,middlewarepour ajouter une logique d'application centralisée et d'autres fonctionnalités puissantes queReduxpermet.
Redux est beaucoup plus puissant et fournit un grand nombre de fonctionnalités que le Context Api ne fournit pas, ainsi que As @ danAbramov mentionné
React Redux utilise le contexte en interne mais n’expose pas ce fait dans l’API publique. Vous devriez donc vous sentir beaucoup plus en sécurité lorsque vous utilisez le contexte via React Redux plutôt que directement, car si cela change, le fardeau de la mise à jour du code incombera à React Redux et non à vous.
Il appartient à Redux de mettre à jour son implémentation pour s’adapter à la dernière API de contexte.
La dernière API de contexte peut être utilisée pour les applications dans lesquelles vous utiliseriez simplement Redux pour transmettre des données entre composants. Toutefois, les applications qui utilisent des données centralisées et gèrent la demande d'API dans les créateurs d'Action à l'aide de redux-thunk ou redux-saga auraient toujours besoin de redux. En plus de ce redux, d'autres bibliothèques sont associées, telles que redux-persist, qui vous permettent de sauvegarder les données de magasin dans localStorage et de réhydrater lors de l'actualisation, ce que l'API contextuelle ne prend toujours pas en charge.
Comme @dan_abramov l'a mentionné dans son blog vous n'avez peut-être pas besoin de Redux , ce redux a une application utile comme
- Conservez l’état sur un stockage local, puis démarrez-le hors de la boîte.
- Pré-remplissez l’état sur le serveur, envoyez-le au client au format HTML, et démarrez à partir de celui-ci.
- Sérialisez les actions des utilisateurs et associez-les, avec un instantané d'état, à des rapports de bogues automatisés, afin que les développeurs du produit
peut les rejouer pour reproduire les erreurs.- Passez des objets d'action sur le réseau pour implémenter des environnements collaboratifs sans modifier radicalement la manière dont le code est écrit.
- Conservez un historique d'annulation ou implémentez des mutations optimistes sans modifier radicalement la manière dont le code est écrit.
- Parcourez l'historique des états en développement et réévaluez l'état actuel à partir de l'historique des actions lorsque le code change, à la TDD.
- Fournissez des fonctionnalité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 applications.
applications.- Fournissez des interfaces utilisateur alternatives tout en réutilisant l'essentiel 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 de contexte.
Si vous utilisez uniquement Redux pour éviter de transmettre des accessoires à des composants profondément imbriqués , 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 reste (avoir un conteneur d'état prévisible, gérer la logique de votre application en dehors de vos composants, en conservant un état met à jour l'historique en utilisant Redux DevTools , Redux Annuler , Redux Persist , Formulaire Redux , Redux Saga , Redux Logger , etc…), il n’ya donc aucune raison de remplacer Redux par l’API Context.
Références:
Les seules raisons d'utiliser Redux pour moi sont:
- Vous voulez un objet d'état global (pour diverses raisons, comme la capacité de débogage, la persistance, etc.)
- Votre application est ou sera grosse et devrait s’adapter à de nombreux développeurs: dans ce cas, vous avez probablement besoin d’un niveau de direction indirectionnel (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 système. l'organisation peut réellement les écouter
Vous n'avez probablement pas besoin du niveau d'indirection pour l'ensemble de votre application. Il est donc judicieux de mélanger les styles et d'utiliser l'état/contexte local et Redux en même temps.
Je préfère utiliser redux avec redux-thunk pour passer des appels d'API (en utilisant également Axios) et envoyer la réponse aux réducteurs. C'est propre et facile à comprendre.
L'API de contexte est très spécifique à la partie react-redux sur la façon dont les composants React sont connectés au magasin. Pour cela, réagir-redux est bon. Mais si vous le souhaitez, étant donné que Context est officiellement pris en charge, vous pouvez utiliser l'API Context au lieu de react-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 opinionated. Étant donné que je connais bien reagir et que je l’utilise dans tous les projets, je continuerai de l’utiliser. (Il n'y a aucune incitation pour moi à changer).
Mais si vous apprenez aujourd'hui à redux et que vous ne l'avez utilisé nulle part, il vaut la peine d'essayer l'API Context et remplacez react-redux par votre code d'API Context personnalisé. Peut-être que c'est beaucoup plus propre de cette façon.
Personnellement, c'est une question de familiarité. Il n’existe aucune raison claire de choisir l’un sur l’autre, car ils sont équivalents. Et en interne, react-redux utilise quand même le contexte.
- Si vous devez utiliser un middleware à diverses fins. Par exemple, actions de journalisation, rapports d’erreurs, distribution d’autres requêtes en fonction de la réponse du serveur, etc.
- Lorsque des données provenant de plusieurs systèmes d'extrémité influencent un seul composant/vue.
- Lorsque vous souhaitez mieux contrôler les actions de vos applications. Redux permet de suivre les actions et de modifier les données, ce qui simplifie grandement le débogage.
- 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 les données doivent être appliquées. Le motif de l'observateur. Au lieu de créer plusieurs éditeurs et abonnés dans l'ensemble de l'application, il vous suffit de connecter des composants au magasin Redux.