Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between Redux Thunk and Redux Saga?

Both Redux Thunk and Redux Saga are middleware of Redux. What is the difference between two and how to determine when to use Redux Thunk or Redux Saga?

like image 761
MERLIN THOMAS Avatar asked May 11 '18 06:05

MERLIN THOMAS


People also ask

What is redux and redux saga and Redux thunk?

Redux Saga library is another middleware that helps with API calls or side effects. It is the most popular competitor for Redux Thunk. Redux saga uses an ES6 feature called 'Generators', which helps write asynchronous code. Generators are the functions that came with ECMAScript6 of javascript.

What is the purpose of Redux thunk or redux saga?

redux-saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

What's the difference between redux and redux saga?

Redux and redux-saga can be categorized as "State Management Library" tools. "State is predictable" is the top reason why over 175 developers like Redux, while over 2 developers mention "Easy to test" as the leading cause for choosing redux-saga.

Is Thunk better than saga?

Saga works like a separate thread or a background process that is solely responsible for making your side effects or API calls unlike redux-thunk, which uses callbacks which may lead to situations like 'callback hell' in some cases. However, with the async/await system, this problem can be minimized in redux-thunk.


1 Answers

Both Redux Thunk and Redux Saga take care of dealing with side effects. In very simple terms, applied to the most common scenario (async functions, specifically AJAX calls) Thunk allows Promises" to deal with them, Saga uses Generators. Thunk is simple to use and Promises are familiar to many developers, Saga/Generators are more powerful but you will need to learn them. When Promises are just good enough, so is Thunk, when you deal with more complex cases on a regular basis, Saga gives you better tools.

As an example, What happens when you start an AJAX call in a route/view and then the user moves to a different one? Can you safely let the reducer change the state anyway? Saga makes it trivial to cancel the effect, Thunk requires you to take care of it, with solutions that don't scale as nicely.

In practical terms choosing one or the other one really depends (tautologically) on the project.

One thing to keep in mind is that the two middleware can coexists, so you can start with Thunks and introduce Sagas when/if you need them (and then choose how/what to refactor with hands on experience... A solution that especially fits "learning projects", MVPs, et similia) In general terms, Sagas are more powerful and easier to test, but they introduce many new concepts, that can be a bit overwhelming if you're also learning other technologies (Redux especially).

Specifically, while dealing with the simple and effective Redux philosophy (actions (literal objects) fed into reducers (pure functions)), you can deal with side effects with Thunk that is more limited but easy to grasp (Promise.then().error()), or with Saga that requires you to face the (powerful) notion that you can do more complex things with those actions.

It's also worth mentioning (redux-)observable as an even more complex (and even more pawerful) paradigm to deal with side effects, just in case you are familiar with it (if you already are, it might be easier to use than learning Saga).

like image 189
user4634576 Avatar answered Nov 08 '22 23:11

user4634576