Dlaczego warto korzystać z Redux nad Facebook Flux? [Zamknięte]

Przeczytałem tę odpowiedź , zmniejszając płytę kotła, przejrzałem kilka przykładów GitHub, a nawet spróbowałem trochę przebudować (aplikacje do zrobienia).

Jak rozumiem, oficjalne motywacje redux doc dostarczają profesjonalistów w porównaniu do tradycyjnych architektur MVC. ALE to nie daje odpowiedzi na pytanie:

Dlaczego powinieneś używać Redux zamiast Facebook Flux?

Czy to tylko kwestia stylów programowania: funkcjonalny czy niefunkcjonalny? Czy pytanie dotyczy umiejętności / narzędzi programistycznych wynikających z podejścia redux? Może skalowanie? Czy testowanie?

Czy mam rację, jeśli powiem, że redux jest fluktuacją dla osób pochodzących z języków funkcjonalnych?

Aby odpowiedzieć na to pytanie, możesz porównać złożoność punktów motywacyjnych implementacji redux na flux vs redux.

Oto punkty motywacyjne z oficjalnych motywacji redux doc :

1. Obsługa optymistycznych aktualizacji ( jak rozumiem, nie zależy to od 5. punktu. Czy trudno jest zaimplementować go na Facebooku? )
2. Renderowanie na serwerze ( może to zrobić również facebook flux. Jakieś korzyści w porównaniu do redux? )
3. Pobieranie danych przed wykonaniem zmiany trasy ( dlaczego nie można tego osiągnąć na Facebooku? Jakie są korzyści? )
4. Hot Reload ( Jest to możliwe dzięki React Hot Reload . Dlaczego potrzebujemy redux? )
5. Funkcja cofania / ponawiania
6. Jakieś inne punkty? Jak trwały stan ...

Redux autor tutaj!

Redux nie jest , że różni się od topnika. Ogólnie rzecz biorąc ma tę samą architekturę, ale Redux jest w stanie skrócić niektóre narożniki złożoności, wykorzystując funkcjonalną kompozycję, w której Flux używa rejestracji wywołania zwrotnego.

W Redux nie ma zasadniczej różnicy, ale uważam, że sprawia, że ​​pewne abstrakcje są łatwiejsze lub przynajmniej możliwe do wdrożenia, które byłyby trudne lub niemożliwe do wdrożenia we Fluxie.

Skład reduktora

Weźmy na przykład paginację. Przykład routera My Flux + React obsługuje podział na strony, ale kod tego jest okropny. Jednym z powodów, dla których jest to okropne, jest to, że Flux sprawia, że ​​nienaturalne jest ponowne używanie funkcji w różnych sklepach. Jeśli dwa sklepy muszą obsługiwać paginację w odpowiedzi na różne działania, albo muszą dziedziczyć ze wspólnego magazynu podstawowego (źle! Blokujesz się w konkretnym projekcie, gdy korzystasz z dziedziczenia), lub wywołać zewnętrznie zdefiniowaną funkcję z poziomu moduł obsługi zdarzeń, który będzie musiał jakoś działać w prywatnym stanie sklepu Flux. Cała sprawa jest bałaganiarska (choć zdecydowanie w dziedzinie możliwej).

Z drugiej strony, dzięki Redux paginacja jest naturalna dzięki składowi reduktora. Reduktory są w dół, więc możesz napisać fabrykę reduktorów, która generuje reduktory stronicowania, a następnie użyć jej w drzewie reduktorów . Kluczem do tego, dlaczego jest to tak łatwe, jest to, że we Fluxie sklepy są płaskie, ale w Redux reduktory można zagnieżdżać za pomocą funkcjonalnej kompozycji, podobnie jak można zagnieżdżać komponenty React.

Ten wzór umożliwia także wspaniałe funkcje, takie jak cofanie / ponawianie kodu bez użytkownika . Czy potrafisz sobie wyobrazić podłączanie Cofnij / Powtórz do aplikacji Flux, która jest dwoma liniami kodu? Ledwie. W Redux jest to ponownie dzięki wzorowi składu reduktora. Muszę podkreślić, że nie ma w tym nic nowego - jest to wzorzec zapoczątkowany i szczegółowo opisany w Architekturze Wiązów, na który sam wpływ miał Flux.

Renderowanie serwera

Ludzie dobrze renderowali na serwerze za pomocą Fluxa, ale widząc, że mamy 20 bibliotek Fluxa, z których każda próbuje uczynić serwer „renderowaniem łatwiejszym”, być może Flux ma pewne szorstkie krawędzie na serwerze. Prawda jest taka, że ​​Facebook nie renderuje zbyt wiele serwerów, więc nie byli tym bardzo zaniepokojeni i polegają na ekosystemie, aby to ułatwić.

W tradycyjnym systemie Flux sklepy są singletonami. Oznacza to, że trudno jest oddzielić dane dla różnych żądań na serwerze. Nie niemożliwe, ale trudne. Właśnie dlatego większość bibliotek Flux (jak również nowe narzędzia Flux ) sugerują teraz używanie klas zamiast singletonów, dzięki czemu można tworzyć instancje sklepów na żądanie.

Nadal istnieją następujące problemy, które musisz rozwiązać we Fluxie (samodzielnie lub przy pomocy swojej ulubionej biblioteki Flux, takiej jak Flummox lub Alt ):

• Jeśli sklepy są klasami, jak je utworzyć i zniszczyć za pomocą dyspozytora na żądanie? Kiedy rejestruję sklepy?
• Jak uwodnić dane ze sklepów, a następnie uwodnić je na kliencie? Czy muszę zaimplementować do tego specjalne metody?

Wprawdzie frameworki Flux (nie Vanilla Flux) mają rozwiązania tych problemów, ale uważam, że są zbyt skomplikowane. Na przykład, speszyć kogoś prosi, aby wdrożyć serialize()i deserialize()w swoich sklepach . Alt rozwiązuje ten problem, zapewniając takeSnapshot()automatyczne serializowanie stanu w drzewie JSON.

Redux idzie dalej: ponieważ istnieje tylko jeden sklep (zarządzany przez wiele reduktorów), nie potrzebujesz żadnego specjalnego API do zarządzania (ponownym) nawodnieniem. Nie musisz „przepłukiwać” ani „nawadniać” sklepów - jest tylko jeden sklep i możesz odczytać jego aktualny stan lub utworzyć nowy sklep z nowym stanem. Każde żądanie otrzymuje osobną instancję sklepu. Przeczytaj więcej o renderowaniu serwerów za pomocą Redux.

Ponownie, jest to przypadek czegoś możliwego zarówno we Fluxie, jak i Reduxie, ale biblioteki Flux rozwiązują ten problem, wprowadzając mnóstwo API i konwencji, a Redux nawet nie musi go rozwiązać, ponieważ nie ma tego problemu w pierwsze miejsce dzięki prostocie koncepcyjnej.

Doświadczenie programistów

W rzeczywistości nie zamierzałem, aby Redux stał się popularną biblioteką Flux - napisałem to, pracując nad moim wystąpieniem ReactEurope na temat przeładowywania w czasie podróży . Miałem jeden główny cel: umożliwić zmianę kodu reduktora w locie, a nawet „zmienić przeszłość” poprzez wykreślanie działań i zobaczyć, jak stan jest przeliczany.

Nie widziałem żadnej biblioteki Flux, która byłaby w stanie to zrobić. React Hot Loader również nie pozwala ci tego zrobić - w rzeczywistości psuje się, jeśli edytujesz sklepy Flux, ponieważ nie wie, co z nimi zrobić.

Kiedy Redux musi ponownie załadować kod reduktora, dzwoni replaceReducer(), a aplikacja działa z nowym kodem. W Flux dane i funkcje są zaplątane w sklepach Flux, więc nie można „po prostu zastąpić funkcji”. Co więcej, będziesz musiał jakoś ponownie zarejestrować nowe wersje w Dispatcherze - coś, czego Redux nawet nie ma.

Ekosystem

Redux ma bogaty i szybko rozwijający się ekosystem . Wynika to z faktu, że zapewnia on kilka punktów rozszerzenia, takich jak oprogramowanie pośrednie . Został zaprojektowany z myślą o przypadkach użycia, takich jak rejestrowanie , obsługa obietnic , obserwowalności , routing , sprawdzanie twórców niezmienności , trwałość itp. Nie wszystkie z nich okażą się przydatne, ale miło jest mieć dostęp do zestawu narzędzi, które można łatwo połączyć, aby ze sobą współpracować.

Prostota

Redux zachowuje wszystkie zalety Flux (nagrywanie i odtwarzanie akcji, jednokierunkowy przepływ danych, zależne mutacje) i dodaje nowe korzyści (łatwe cofanie, ponawianie, ponowne ładowanie) bez konieczności wprowadzania dyspozytora i rejestracji w sklepie.

Utrzymanie prostoty jest ważne, ponieważ pozwala zachować rozsądek podczas wdrażania abstrakcyjnych poziomów wyższego poziomu.

W przeciwieństwie do większości bibliotek Flux, interfejs API Redux jest niewielki. Jeśli usuniesz ostrzeżenia programisty, komentarze i testy poprawności, będzie to 99 wierszy . Nie ma trudnego kodu asynchronicznego do debugowania.

Możesz go przeczytać i zrozumieć cały Redux.

Zobacz także moją odpowiedź na temat wad korzystania z Redux w porównaniu do Flux .

W Quora ktoś mówi :

Przede wszystkim można całkowicie pisać aplikacje za pomocą React bez Fluxa.

Również ten schemat wizualny, który stworzyłem, aby pokazać szybki przegląd obu, prawdopodobnie szybką odpowiedź dla osób, które nie chcą przeczytać całego wyjaśnienia:

Ale jeśli nadal chcesz wiedzieć więcej, czytaj dalej.

Uważam, że powinieneś zacząć od czystej React, a następnie nauczyć się Redux i Flux. Po tym, jak będziesz mieć PRAWDZIWE doświadczenie z React, zobaczysz, czy Redux jest dla ciebie pomocny, czy nie.

Może poczujesz, że Redux jest właśnie dla twojej aplikacji, a może przekonasz się, że Redux próbuje rozwiązać problem, którego tak naprawdę nie masz.

Jeśli zaczniesz bezpośrednio od Redux, możesz skończyć z przeprojektowanym kodem, kodem trudniejszym do utrzymania i jeszcze większą liczbą błędów i niż bez Redux.

Z dokumentów Redux :

Motywacja
Ponieważ wymagania dotyczące aplikacji jednostronicowych JavaScript stają się coraz bardziej skomplikowane, nasz kod musi zarządzać większą liczbą stanów niż kiedykolwiek wcześniej. Ten stan może obejmować odpowiedzi serwera i buforowane dane, a także lokalnie utworzone dane, które nie zostały jeszcze utrwalone na serwerze. Stan interfejsu użytkownika również rośnie w złożoności, ponieważ musimy zarządzać aktywnymi trasami, wybranymi kartami, pokrętłami, kontrolkami paginacji i tak dalej.

Zarządzanie tym ciągle zmieniającym się stanem jest trudne. Jeśli model może zaktualizować inny model, widok może zaktualizować model, który zaktualizuje inny model, a to z kolei może spowodować aktualizację innego widoku. W pewnym momencie nie rozumiesz już, co dzieje się w Twojej aplikacji, ponieważ straciłeś kontrolę nad tym, kiedy, dlaczego i jaki jest jej stan. Kiedy system jest nieprzejrzysty i niedeterministyczny, trudno jest odtworzyć błędy lub dodać nowe funkcje.

Jakby to nie było dość złe, zastanów się, czy nowe wymagania stają się powszechne w rozwoju produktów front-end. Jako programiści oczekujemy optymistycznych aktualizacji, renderowania po stronie serwera, pobierania danych przed wykonaniem przejścia trasy i tak dalej. Próbujemy poradzić sobie ze złożonością, z którą nigdy wcześniej nie mieliśmy do czynienia, i nieuchronnie zadajemy pytanie: czy czas się poddać? Odpowiedź brzmi nie.

Ta złożoność jest trudna do opanowania, ponieważ mieszamy dwie koncepcje, o których ludzkim umyśle trudno jest wnioskować: mutacja i asynchroniczność. Nazywam je Mentos i Coke. Oba mogą być świetne, gdy są rozdzielone, ale razem tworzą bałagan. Biblioteki takie jak React próbują rozwiązać ten problem w warstwie widoku poprzez usunięcie zarówno asynchronicznej, jak i bezpośredniej manipulacji DOM. Jednak zarządzanie stanem Twoich danych należy do Ciebie. W tym momencie pojawia się Redux.

Podążając śladami Flux, CQRS i Event Sourcing, Redux stara się, aby mutacje stanu były przewidywalne, nakładając pewne ograniczenia na to, jak i kiedy mogą się odbywać aktualizacje. Ograniczenia te znajdują odzwierciedlenie w trzech zasadach Redux.

Również z dokumentów Redux :

Podstawowe pojęcia
Sam Redux jest bardzo prosty.

Wyobraź sobie, że stan Twojej aplikacji jest opisany jako zwykły obiekt. Na przykład stan aplikacji do zrobienia może wyglądać następująco:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Ten obiekt jest jak „model”, tyle że nie ma żadnych ustawień. Dzieje się tak, aby różne części kodu nie mogły dowolnie zmieniać stanu, powodując trudne do odtworzenia błędy.

Aby zmienić coś w stanie, musisz wysłać akcję. Działanie to zwykły obiekt JavaScript (zauważ, jak nie wprowadzamy żadnej magii?), Który opisuje, co się stało. Oto kilka przykładowych działań:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

Wymuszenie, że każda zmiana jest opisana jako działanie, pozwala nam dokładnie zrozumieć, co dzieje się w aplikacji. Jeśli coś się zmieniło, wiemy, dlaczego to się zmieniło. Działania są jak bułka tarta tego, co się wydarzyło. Wreszcie, aby połączyć stan i działania, piszemy funkcję zwaną reduktorem. Ponownie, nic magicznego w tym - jest to tylko funkcja, która przyjmuje stan i akcję jako argumenty i zwraca następny stan aplikacji. Trudno byłoby napisać taką funkcję dla dużej aplikacji, więc piszemy mniejsze funkcje zarządzające częściami stanu:

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

Piszemy też inny reduktor, który zarządza pełnym stanem naszej aplikacji, wywołując te dwa reduktory dla odpowiednich kluczy stanu:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

To w zasadzie cała idea Redux. Pamiętaj, że nie korzystaliśmy z żadnych interfejsów API Redux. Jest wyposażony w kilka narzędzi ułatwiających ten wzorzec, ale główna idea polega na tym, że opisujesz, jak twój stan jest aktualizowany w czasie w odpowiedzi na obiekty akcji, a 90% pisanego kodu to po prostu JavaScript, bez użycia Redux sama, jej interfejsy API lub dowolna magia.

Być może najlepiej zacząć od przeczytania tego posta Dan Abramov, w którym omawia różne implementacje Fluxa i ich kompromisy w czasie, gdy pisał redux: The Evolution of Flux Frameworks

Po drugie, strona motywacji, do której linkujesz, tak naprawdę nie omawia motywacji Redux, tak jak motywacji stojącej za Flux (i React). Te trzy zasady jest bardziej specyficzny Redux choć nadal nie radzić sobie z różnicami implementacji ze standardowego architektury Flux.

Zasadniczo Flux ma wiele sklepów, które obliczają zmianę stanu w odpowiedzi na interakcje interfejsu użytkownika / interfejsu API ze składnikami i rozgłaszają te zmiany jako zdarzenia, które mogą subskrybować składniki. W Redux istnieje tylko jeden sklep, który subskrybuje każdy komponent. IMO wydaje się, że przynajmniej Redux dodatkowo upraszcza i ujednolica przepływ danych poprzez ujednolicenie (lub ograniczenie, jak powiedziałby Redux) przepływu danych z powrotem do komponentów - podczas gdy Flux koncentruje się na ujednoliceniu drugiej strony przepływu danych - zobacz Model.

Jestem wczesnym adaptatorem i zaimplementowałem aplikację o dużej, jednostronicowej stronie, korzystając z biblioteki Facebook Flux.

Ponieważ jestem trochę spóźniony do rozmowy, po prostu podkreślę, że pomimo moich najlepszych nadziei Facebook wydaje się uważać ich wdrożenie Fluxa za dowód koncepcji i nigdy nie otrzymał uwagi, na którą zasługuje.

Zachęcam do zabawy, ponieważ odsłania on bardziej wewnętrzne działanie architektury Flux, która jest dość edukacyjna, ale jednocześnie nie zapewnia wielu korzyści, jakie zapewniają biblioteki takie jak Redux (które nie są jest to ważne w przypadku małych projektów, ale staje się bardzo cenne w przypadku większych).

Zdecydowaliśmy, że posuwając się naprzód, przejdziemy do Redux i sugeruję, abyś zrobił to samo;)

Oto proste wyjaśnienie Redux nad Flux. Redux nie ma dyspozytora, opiera się na czystych funkcjach zwanych reduktorami. Nie potrzebuje dyspozytora. Każda akcja jest obsługiwana przez jeden lub więcej reduktorów w celu aktualizacji pojedynczego sklepu. Ponieważ dane są niezmienne, reduktory zwracają nowy zaktualizowany stan, który aktualizuje sklep

Aby uzyskać więcej informacji Flux vs Redux

Długo pracowałem z Flux, a teraz dość długo z Redux. Jak zauważył Dan, obie architektury nie różnią się tak bardzo. Chodzi o to, że Redux czyni rzeczy prostszymi i czystszymi. Nauczy Cię kilku rzeczy na temat Fluxa. Jak na przykład Flux jest doskonałym przykładem jednokierunkowego przepływu danych. Rozdzielenie obaw, w których mamy dane, ich manipulacje i warstwę widoku oddzielone. W Redux mamy te same rzeczy, ale uczymy się również o niezmienności i czystych funkcjach.

Z nowego modułu adoptującego reakcję / redux migrującego z (kilku lat) ExtJS w połowie 2018 r .:

Po zjechaniu do tyłu w dół krzywej uczenia się redux, miałem to samo pytanie i pomyślałem, że czysty strumień będzie prostszy jak OP.

Wkrótce zobaczyłem zalety redux nad flux, jak zauważono w odpowiedziach powyżej, i pracowałem nad tym w mojej pierwszej aplikacji.

Znów chwytając płytę kotła, wypróbowałem kilka innych bibliotek zarządzania stanem, najlepiej znalazłem rewanż .

Było o wiele bardziej intuicyjne niż redux waniliowy, odcina 90% płyty głównej i 75% czasu, który spędziłem na redux (coś, co myślę, że biblioteka powinna robić), udało mi się zdobyć kilka aplikacji dla przedsiębiorstw idę od razu.

Działa również z tym samym narzędziem redux. To dobry artykuł, który obejmuje niektóre korzyści.

Tak więc dla każdego, kto przybył do tego wpisu SO szukając „prostszego redux”, polecam wypróbowanie go jako prostej alternatywy dla redux ze wszystkimi zaletami i 1/4 płyty głównej.

Zgodnie z tym artykułem: https://medium.freecodecamp.org/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075

Lepiej używaj MobX do zarządzania danymi w swojej aplikacji, aby uzyskać lepszą wydajność, a nie Redux.