Jaka jest różnica między redux-thunk i redux-promise?


93

O ile wiem i poprawiam mnie, jeśli się mylę, redux-thunk to oprogramowanie pośredniczące, które pomaga nam wywoływać funkcję asynchroniczną i debugować wartości w samej akcji, podczas gdy gdy użyłem redux-obietnica, nie mogłem tworzyć funkcji asynchronicznych bez implementacji własnej mechanizm, ponieważ Action rzuca wyjątek wysyłania tylko zwykłych obiektów.

Jakie są główne różnice między tymi dwoma pakietami? Czy są jakieś korzyści z używania obu pakietów w jednej aplikacji reagującej na jedną stronę lub wystarczy trzymać się redux-thunk?

Odpowiedzi:


120

redux-thunk umożliwia twórcom akcji zwrócenie funkcji:

function myAction(payload){
    return function(dispatch){
        // use dispatch as you please
    }
}

redux-promise pozwala im zwrócić obietnicę:

function myAction(payload){
    return new Promise(function(resolve, reject){
        resolve(someData); // redux-promise will dispatch someData
    });
}

Obie biblioteki są przydatne, jeśli chcesz wywołać akcję asynchronicznie lub warunkowo. redux-thunkpozwala również na wysyłanie kilku razy w ramach jednego kreatora akcji. To, czy wybierzesz jedną, drugą, czy obie, zależy całkowicie od Twoich potrzeb / stylu.


1
świetna odpowiedź. Mógłbym dodać, że bzdury można traktować jako lekką obietnicę. Pomaga znormalizować czas podczas zarządzania akcjami asynchronicznymi.
Matt Catellier

4
Jeśli korzystasz z obietnic, możesz używać async /
await

81

Prawdopodobnie będziesz potrzebować obu razem w swojej aplikacji. Zacznij od redux-promise dla rutynowych zadań asynchronicznych tworzących obietnice, a następnie skaluj w górę, aby dodać Thunks (lub Sagas itp.) W miarę wzrostu złożoności :

  • Kiedy życie jest proste i po prostu wykonujesz podstawową pracę asynchroniczną z twórcami, którzy zwracają jedną obietnicę, redux-promisepoprawi to Twoje życie i uprości je, szybko i łatwo. (Krótko mówiąc, zamiast myśleć o `` rozpakowaniu '' swoich obietnic, gdy zostaną rozwiązane, a następnie napisaniu / wysłaniu wyników, redux-promise (-middleware) zajmie się wszystkimi nudnymi rzeczami.)
  • Ale życie staje się bardziej złożone, gdy:
    • Może twój twórca akcji chce wydać kilka obietnic, które chcesz wysłać jako oddzielne akcje do oddzielnych reduktorów?
    • A może masz do zarządzania złożoną logikę przetwarzania wstępnego i warunkową, zanim zdecydujesz, jak i gdzie wysłać wyniki?

W takich przypadkach zaletą redux-thunkjest to, że pozwala na zawarcie złożoności w kreatorze akcji .

Pamiętaj jednak, że jeśli Twój Thunk tworzy i wysyła obietnice, będziesz chciał używać obu bibliotek razem :

  • Thunk skomponowałby oryginalne działania i wysłał je
  • redux-promisebędzie wtedy obsługiwał rozpakowywanie w reduktorze (-ach) indywidualnych obietnic wygenerowanych przez Thunk, aby uniknąć schematu, który za tym idzie. (Ty mógł zamiast robić wszystko, co w łącznikami, z promise.then(unwrapAndDispatchResult).catch(unwrapAndDispatchError)... ale dlaczego prawda?)

Kolejny prosty sposób na podsumowanie różnicy w przypadkach użycia: początek kontra koniec cyklu akcji Redux :

  • Thunks są na początek przepływu Redux: jeśli potrzebujesz stworzyć złożoną akcję lub zawrzeć jakąś skomplikowaną logikę tworzenia akcji, utrzymując ją z dala od twoich komponentów i zdecydowanie z dala od reduktorów.
  • redux-promisejest na koniec twojego przepływu, gdy wszystko zostanie sprowadzone do prostych obietnic, a ty po prostu chcesz je rozpakować i przechowywać ich rozstrzygniętą / odrzuconą wartość w sklepie

UWAGI / REFS:

  • Uważam, że redux-promise-middlewarejest to pełniejsza i bardziej zrozumiała realizacja idei oryginału redux-promise. Jest w trakcie aktywnego rozwoju, a także jest ładnie uzupełniony redux-promise-reducer.
  • dostępne są dodatkowe podobne oprogramowanie pośredniczące do komponowania / sekwencjonowania złożonych działań: jednym z bardzo popularnych jest redux-saga, które jest bardzo podobne do redux-thunkskładni funkcji generatora, ale jest oparte na składni. Ponownie, prawdopodobnie użyjesz go w połączeniu z redux-promise.
  • Oto świetny artykuł bezpośrednio porównujący różne opcje kompozycji asynchronicznej, w tym oprogramowanie pośredniczące Thunk i Redux-Promise-Middleware. (TL; DR: „Oprogramowanie pośredniczące Redux Promise znacznie zmniejsza gotowość do pracy w porównaniu z niektórymi innymi opcjami” ... „Myślę, że lubię Sagę do bardziej złożonych aplikacji (czytaj:„ zastosowania ”), a oprogramowanie pośredniczące Redux Promise do wszystkiego innego”. )
  • Zwróć uwagę, że istnieje ważny przypadek, w którym możesz pomyśleć, że musisz wysłać wiele akcji, ale tak naprawdę tego nie robisz i możesz uprościć proste rzeczy. Właśnie tam chcesz, aby wiele reduktorów reagowało na wywołanie asynchroniczne. Ale nie ma żadnego powodu, dla którego wiele reduktorów nie może monitorować jednego typu akcji. Po prostu chciałbyś się upewnić, że Twój zespół wie, że używasz tej konwencji, więc nie zakładają, że tylko jeden reduktor (o powiązanej nazwie) może obsłużyć daną akcję.

5
Świetne wyjaśnienie! sama liczba bibliotek gotuje się w głowie. :)
AnBisw

22

Pełne ujawnienie: Jestem stosunkowo nowy w rozwoju Redux i sam zmagałem się z tym pytaniem. Parafrazuję najbardziej zwięzłą odpowiedź, jaką znalazłem:

ReduxPromise zwraca obietnicę jako ładunek po wysłaniu akcji, a następnie oprogramowanie pośredniczące ReduxPromise działa, aby rozwiązać tę obietnicę i przekazać wynik do reduktora.

Z drugiej strony, ReduxThunk zmusza twórcę akcji do wstrzymania się z faktycznym wysyłaniem obiektu akcji do reduktorów, dopóki nie zostanie wywołana wysyłka.

Oto link do samouczka, w którym znalazłem te informacje: https://blog.tighten.co/react-101-part-4-firebase .


5
... w pewnym sensie . To są ... skutki uboczne ... rzeczywistych wzorców. ReduxPromise również nie zwraca obietnicy jako ładunku. ReduxPromise obsługuje wszelkie akcje, które wysyłasz , w których ładunkiem jest obietnica .
XML
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.