React Context vs React Redux, wanneer moet ik ze allemaal gebruiken?

React 16.3.0 is uitgebrachten de ContextAPI is geen experimentele functie meer. Dan Abramov (de maker van Redux) schreef hierhierover, maar het was 2 jaar toen Context nog een experimentele functie was.

Mijn vraag is, naar jouw mening/ervaring, wanneer moet ik React Contextgebruiken in plaats van React Reduxen vice versa?


Antwoord 1, autoriteit 100%

Omdat Contextniet langer een experimentele functie is en u Context rechtstreeks in uw toepassing kunt gebruiken en geweldig zal zijn voor het doorgeven van gegevens aan diep geneste componenten waarvoor het is ontworpen.

Zoals Mark erikson heeft geschreven in zijn blog:

Als je Redux alleen gebruikt om te voorkomen dat rekwisieten worden doorgegeven, kan de context
vervang Redux – maar dan had je Redux in het begin waarschijnlijk niet nodig
plaats.

Context geeft je ook niet zoiets als de Redux DevTools, de
mogelijkheid om uw statusupdates te traceren, middlewareom gecentraliseerd toe te voegen
applicatielogica en andere krachtige mogelijkheden die Redux
ingeschakeld.

Reduxis veel krachtiger en biedt een groot aantal functies die de Context Apiniet biedt, ook als @danAbramovvermeld

React Redux gebruikt intern context, maar het onthult dit feit niet in
de openbare API. Je zou je dus veel veiliger moeten voelen als je context gebruikt via React
Redux dan direct, want als het verandert, de last van het bijwerken van de
code staat op React Redux en niet jij.

Het is aan Redux om de implementatie daadwerkelijk bij te werken om te voldoen aan de nieuwste context-API

De nieuwste Context API kan worden gebruikt voor toepassingen waar u gewoon Redux zou gebruiken om gegevens tussen componenten door te geven, maar toepassingen die gecentraliseerde gegevens gebruiken en API-verzoeken afhandelen in actiemakers met behulp van redux-thunkof redux-sagazou nog steeds redux nodig hebben. Afgezien van deze redux heeft redux andere bibliotheken zoals redux-persistwaarmee u winkelgegevens kunt opslaan in localStorage en opnieuw kunt hydrateren bij verversen, wat de context-API nog steeds niet ondersteunt.

Zoals @dan_abramov al zei in zijn blog Misschien heb je Redux niet nodig, die redux heeft een handige applicatie zoals

  • Behoud de status tot een lokale opslag en start er dan direct vanaf op.
  • Vul de status vooraf in op de server, stuur deze naar de client in HTML en start er direct vanaf op.
  • Serialiseer gebruikersacties en voeg ze, samen met een momentopname van de staat, toe aan geautomatiseerde bugrapporten, zodat de productontwikkelaars
    kan ze opnieuw afspelen om de fouten te reproduceren.
  • Geef actie-objecten door via het netwerk om samenwerkingsomgevingen te implementeren zonder ingrijpende veranderingen in de manier waarop de code wordt geschreven.
  • Houd een geschiedenis ongedaan maken of implementeer optimistische mutaties zonder dramatische veranderingen in de manier waarop de code is geschreven.
  • Reis tussen de statusgeschiedenis in ontwikkeling en evalueer de huidige status opnieuw vanuit de actiegeschiedenis wanneer de code verandert, een
    la TDD.
  • Geef volledige inspectie- en besturingsmogelijkheden aan de ontwikkelingstooling, zodat productontwikkelaars aangepaste hulpmiddelen voor hen kunnen bouwen
    apps.
  • Geef alternatieve UIS tijdens het hergebruiken van de meeste bedrijfslogica.

Met deze vele toepassing is het ook veel te vroeg om te zeggen dat Redux wordt vervangen door de nieuwe context API


Antwoord 2, Autoriteit 44%

Als u REDUX alleen gebruikt om te voorkomen dat het doorgeven van props tot diep geneste componenten , kunt u redux vervangen door de ContextAPI. Het is precies bedoeld voor dit gebruik.

Aan de andere kant, Als u Redux gebruikt voor al het andere (met een voorspelbare staatscontainer, het omgaan met de logica van uw toepassing buiten uw componenten, het centraliseren van de status van uw toepassing, met behulp van Redux Devtools om bij te nummer wanneer, waar, waarom en hoe de status van uw toepassing is gewijzigd of met behulp van plug-ins als redux formulier , Redux Saga , redux undo , redux volharden , Redux Logger , enz …), dan is er absoluut geen reden om Redux te verlaten. De ContextAPI geeft hier geen van.

en ik ben van persoonlijk gelooft dat de Extensie Redux Devtools een verbazingwekkende, onderschatte foutopsporingstool is, die op zichzelf rechtvaardigt om Redux te blijven gebruiken.

Enkele referenties:


Antwoord 3, autoriteit 8%

Ik gebruik liever redux met redux-thunk voor het maken van API-aanroepen (ook met Axios) en het verzenden van de reactie naar reducers. Het is overzichtelijk en gemakkelijk te begrijpen.

Context API is zeer specifiek voor het react-redux-gedeelte over hoe React-componenten zijn verbonden met de winkel. Hiervoor is react-redux goed. Maar als je wilt, aangezien Context officieel wordt ondersteund, kun je de Context API gebruiken in plaats van react-redux.

Dus, de vraag zou Context API vs react-redux moeten zijn, en niet Context API vs redux. De vraag is ook een beetje eigenwijs. Aangezien ik bekend ben met react-redux en het in alle projecten gebruik, zal ik het blijven gebruiken. (Er is geen prikkel voor mij om te veranderen).

Maar als je redux net vandaag leert, en je hebt het nog nergens gebruikt, is het de moeite waard om Context API een kans te geven en react-redux te vervangen door je eigen Context API-code. Misschien is het op die manier veel schoner.

Persoonlijk is het een kwestie van vertrouwdheid. Er is geen duidelijke reden om de een boven de ander te kiezen omdat ze gelijkwaardig zijn. En intern gebruikt react-redux toch Context.


Antwoord 4, autoriteit 6%

De enige redenen om Redux voor mij te gebruiken zijn:

  • U wilt een globaal statusobject (om verschillende redenen, zoals foutopsporing, persistentie…)
  • Uw app is of zal groot zijn en zou naar veel ontwikkelaars moeten schalen: in zo’n geval heeft u waarschijnlijk een niveau van indirectheid nodig (dwz een gebeurtenissysteem): u ontslaat gebeurtenissen (in het verleden) en vervolgens mensen die u niet weet dat u in uw organisatie echt naar hen kunt luisteren

Je hebt waarschijnlijk het indirecte niveau niet nodig voor je hele app, dus het is prima om stijlen te mixen en tegelijkertijd lokale staat/context en Redux te gebruiken.


Antwoord 5, autoriteit 2%

  • Als u middleware voor verschillende doeleinden moet gebruiken.Bijvoorbeeld het loggen van acties, foutrapportage, het verzenden van andere verzoeken, afhankelijk van
    op het antwoord van de server, enz.
  • Als gegevens afkomstig van meerdere eindpunten een enkel onderdeel/weergave beïnvloeden.
  • Als u meer controle wilt hebben over acties in uw applicaties.Redux maakt het volgen van acties en gegevensverandering mogelijk, het
    vereenvoudigt het debuggen aanzienlijk.
  • Als u niet wilt dat de serverreactie de status van uw applicatie direct verandert.Redux voegt een laag toe, waar u kunt beslissen hoe, wanneer
    en of deze gegevens moeten worden toegepast. Het waarnemerspatroon. In plaats van
    het creëren van meerdere uitgevers en abonnees in de hele app, u
    sluit gewoon componenten aan op de Redux-winkel.

Van: Wanneer Redux gebruiken?

Other episodes