React Context vs React Redux, kiedy powinienem używać każdego z nich? [Zamknięte]


200

React 16.3.0 został wydany, a Context API nie jest już funkcją eksperymentalną. Dan Abramov (twórca Redux) napisał dobry komentarz tutaj o tym, ale to było 2 lata, gdy kontekst był jeszcze funkcja eksperymentalna.

Moje pytanie jest, w opinii / doświadczeń, kiedy należy używać React Kontekst ponad Reaguj Redux i odwrotnie?


Jeśli porównujesz Redux i React Context API, to dlatego, że chcesz tylko synchronizować zmienne między komponentami. Sprawdź duixpakiet npm. To tylko prosty menedżer stanu z wywołaniami zwrotnymi, naprawdę łatwy do wdrożenia. Żeby było jasne: jestem twórcą.
Broda Noel

Odpowiedzi:


216

Ponieważ kontekst nie jest już funkcją eksperymentalną i możesz używać go bezpośrednio w swojej aplikacji i będzie świetny do przekazywania danych do głęboko zagnieżdżonych komponentów, do których został zaprojektowany.

Jak napisał Mark Erikson na swoim blogu :

Jeśli używasz Reduksa tylko po to, aby uniknąć przekazywania rekwizytów, kontekst może zastąpić Redux - ale wtedy prawdopodobnie nie potrzebowałeś Reduksa w pierwszej kolejności.

Kontekst również nie daje Ci niczego podobnego Redux DevTools, możliwości śledzenia aktualizacji stanu, middlewaredodawania scentralizowanej logiki aplikacji i innych potężnych możliwości, które Redux umożliwiają.

Reduxjest znacznie potężniejszy i zapewnia dużą liczbę funkcji, których Context Apinie zapewnia, również jak wspomniał @danAbramov

React Redux używa kontekstu wewnętrznie, ale nie ujawnia tego faktu w publicznym API. Więc powinieneś czuć się znacznie bezpieczniej, używając kontekstu przez React Redux niż bezpośrednio, ponieważ jeśli to się zmieni, ciężar aktualizacji kodu będzie spoczywał na React Redux, a nie na tobie.

Jego upto Redux, aby faktycznie zaktualizować swoją implementację, aby była zgodna z najnowszym kontekstowym API

Najnowszy kontekstowy interfejs API może być używany w aplikacjach, w których po prostu używałbyś Redux do przekazywania danych między komponentami, jednak aplikacje, które używają scentralizowanych danych i obsługują żądania API w Action, twórcy używający redux-thunklub redux-saganadal potrzebują redukcji. Oprócz tego redux ma powiązane inne biblioteki, takie jak, redux-persistktóre pozwalają na zapisywanie danych przechowywania w localStorage i ponowne nawadnianie przy odświeżaniu, czego wciąż nie obsługuje kontekstowe API.

Jak @dan_abramov wspomniał na swoim blogu, możesz nie potrzebować Redux , ten redux ma użyteczną aplikację, taką jak

  • Utrwal stan w lokalnej pamięci, a następnie uruchom z niej, po wyjęciu z pudełka.
  • Wypełnij wstępnie stan serwera, wyślij go do klienta w formacie HTML i uruchom z niego po wyjęciu z pudełka.
  • Serializuj działania użytkownika i dołączaj je, wraz z migawką stanu, do automatycznych raportów o błędach, aby twórcy produktu
    mogli je odtworzyć w celu odtworzenia błędów.
  • Przekaż obiekty akcji przez sieć, aby zaimplementować środowiska współpracy bez radykalnych zmian w sposobie pisania kodu.
  • Zachowaj historię cofania lub wdrażaj optymistyczne mutacje bez dramatycznych zmian w sposobie pisania kodu.
  • Podróżuj między tworzoną historią stanu i ponownie oceniaj bieżący stan z historii akcji, gdy kod się zmienia, a la TDD.
  • Zapewnij pełne możliwości inspekcji i kontroli narzędzi programistycznych, aby deweloperzy produktów mogli tworzyć niestandardowe narzędzia dla swoich
    aplikacji.
  • Zapewnij alternatywne interfejsy użytkownika, wykorzystując ponownie większość logiki biznesowej.

Przy tak wielu aplikacjach jest zbyt wcześnie, aby powiedzieć, że Redux zostanie zastąpiony przez nowy Context API


Ok, ale co z możliwością ponownego wykorzystania? Konteksty są całkowicie wielokrotnego użytku, gdy tylko redux + thunk, a zwłaszcza redux + saga są ledwo.
Yurii Haiovyi

4
@Daggett Jedną rzeczą, którą musimy zrozumieć, jest to, że redux nie jest kontekstem, jest zbudowany na podstawie kontekstu, sklep, który posiadasz, jest przekazywany w kontekście, a także czy możesz wyjaśnić, co masz na myśli przez wielokrotne
użycie

Nawet opracowanie tak podstawowej rzeczy, jak pojemnik wielokrotnego użytku z efektami ubocznymi, staje się koszmarem z reduksem. Redux jest ciasny na poziomie aplikacji i możesz powiedzieć, że nadal można go używać wielokrotnie itp., Ale mówiąc, że jest wielokrotnego użytku, mam na myśli całkowicie wielokrotnego użytku ... Bez spaghetti kolców, zbudowany jako oddzielny pakiet i może być ponownie użyty niezależnie do konfiguracji aplikacji .
Yurii Haiovyi

@YuriiHaiovyi Zgadzam się z twoimi pytaniami. Ta odpowiedź jest w zasadzie skompilowaną wersją tego, co mówią posty na blogu, do których prowadzą linki. Nie ma nic o dzieleniu się własną perspektywą, tak jakbym używał tylko kontekstu, a potem utknąłem i poczułem, że to zły wybór z pewnych powodów x, y, z, a potem przeniosłem się do Redux, Mobx, które to rozwiązały ... na przykład historię . Głównie ludzie pytają lub szukają tego, aby sprawdzić, czy są jakieś złe lub dobre historie, które mogą pomóc czytelnikom w myśleniu i podejmowaniu przemyślanych decyzji ... Więc moje pytanie, jaką ścieżkę wybierasz?
Arup Rakshit

4
Która część Redux nie nadaje się do ponownego użycia? Możesz łatwo ponownie użyć reduktorów, selektorów, akcji i kreatorów akcji w innej aplikacji z reduksem (reaguj, nawet kątowo).
Dávid Molnár

93

Jeśli używasz Redux tylko po to, aby uniknąć przekazywania właściwości do głęboko zagnieżdżonych komponentów , możesz zamienić Redux na ContextAPI. Jest dokładnie przeznaczony do tego przypadku użycia.

Z drugiej strony, jeśli używasz Redux do wszystkiego innego (mając przewidywalny kontener stanu, obsługując logikę aplikacji poza komponentami, centralizując stan aplikacji, używając Redux DevTools do śledzenia, kiedy, gdzie, dlaczego i jak stan aplikacji zmieniony lub używając wtyczek, takich jak Redux Form , Redux Saga , Redux Undo , Redux Persist , Redux Logger itp.), to nie ma absolutnie żadnego powodu, aby porzucić Redux. ContextAPI nie daje nic z tego.

Osobiście uważam, że rozszerzenie Redux DevTools jest niesamowitym, niedocenianym narzędziem do debugowania, które samo w sobie usprawiedliwia dalsze korzystanie z Redux.

Niektóre odniesienia:


14

Wolę używać redux z redux-thunk do wykonywania wywołań API (również przy użyciu Axios) i wysyłania odpowiedzi do reduktorów. Jest czysty i łatwy do zrozumienia.

Kontekstowy interfejs API jest bardzo specyficzny dla części reaktywnej, opisującej sposób połączenia komponentów React ze sklepem. W tym celu reaktywacja jest dobra. Ale jeśli chcesz, ponieważ Context jest oficjalnie obsługiwany, możesz użyć Context API zamiast React-Redux.

Tak więc pytanie powinno brzmieć: Kontekstowe API vs React-Redux, a nie Kontekstowe API vs Redux. Również pytanie jest nieco uparte. Ponieważ znam React-Redux i używam go we wszystkich projektach, będę go nadal używać. (Nie ma dla mnie zachęty do zmiany).

Ale jeśli uczysz się Redux dopiero dziś i nigdzie go nie używałeś, warto dać Context API szansę i zastąpić React-Redux swoim niestandardowym kodem Context API. Może w ten sposób jest znacznie czystszy.

Osobiście jest to kwestia zażyłości. Nie ma wyraźnego powodu, aby wybierać jedną z nich, ponieważ są one równoważne. I wewnętrznie, react-redux i tak używa Context.


12

Jedyne powody, dla których używam Redux dla mnie to:

  • Chcesz globalnego obiektu stanu (z różnych powodów, takich jak możliwość debugowania, trwałość ...)
  • Twoja aplikacja jest lub będzie duża i powinna być dostosowana do wielu programistów: w takim przypadku prawdopodobnie potrzebujesz poziomu pośredniego (tj. Systemu zdarzeń): uruchamiasz zdarzenia (w przeszłości), a następnie osoby, których nie znasz w swoim organizacja może ich słuchać

Prawdopodobnie nie potrzebujesz poziomu pośredniego dla całej aplikacji, więc dobrze jest mieszać style i używać lokalnego stanu / kontekstu i Redux w tym samym czasie.


3
  • Jeśli potrzebujesz oprogramowania pośredniczącego do różnych celów. Na przykład rejestrowanie akcji, raportowanie błędów, wysyłanie innych żądań w zależności od odpowiedzi serwera itp.
  • Gdy dane pochodzące z wielu punktów końcowych wpływają na pojedynczy komponent / widok.
  • Gdy chcesz mieć większą kontrolę nad akcjami w swoich aplikacjach. Redux umożliwia śledzenie działań i zmian danych, znacznie upraszcza debugowanie.
  • Jeśli nie chcesz, aby odpowiedź serwera bezpośrednio zmieniała stan Twojej aplikacji. Redux dodaje warstwę, w której możesz zdecydować, jak, kiedy i czy te dane mają zostać zastosowane. Wzorzec obserwatora. Zamiast tworzyć wielu wydawców i subskrybentów w całej aplikacji, wystarczy podłączyć komponenty do sklepu Redux.

Od: Kiedy używać Redux?

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.