Redux Thunk Vs Redux Saga

Redux-saga and Redux-thunk belong to “State Management Library” category of the tech stack.
Redux-saga and Redux-thunk are both open source tools, and both belongs to middleware library. But there are some differences and usage on which we can decide where we can use them in our projects or say applications..

Redux Saga

It is a redux middleware library that help to handle side effects((i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in your redux app. It achieves this by leveraging an ES6 feature called Generators.

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

Redux Thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState as parameters.

export const thunkName = parameters => (dispatch, getState) => {
// You can write your application logic here
};

Pros and Cons with Redux Saga

Pros

  • Testability. It’s very easy to test sagas as call() returns a pure object. Testing thunks normally requires you to include a mockStore inside your test.
  • redux-saga comes with lots of useful helper functions about tasks. It seems to me that the concept of saga is to create some kind of background worker/thread for your app, which act as a missing piece in react redux architecture(actionCreators and reducers must be pure functions.) Which leads to next point.
  • Sagas offer independent place to handle all side effects. It is usually easier to modify and manage than thunk actions in my experience.
  • It has quit good documentation and well community support
  • you can avoid callback hell meaning that you can avoid passing in functions and calling them inside.

Cons

  • Generator syntax.
  • Lots of concepts to learn.
  • sagas are entirely decoupled from actions and action creators by default. 

Pros and Cons with Redux Thunk

Pros

  • Redux-Thunk, however is great for small use cases and for beginners
  • Thunks directly connect action creators with their side effects
  • Require less learning for the start

Cons

  • Redux-Thunk returns promises, which are more difficult to test
  • Not good for the big projects.

Conclusion

  • redux-saga with 18.2K GitHub stars and 1.59K forks on GitHub has more adoption than redux-thunk with 12.6K GitHub stars and 682 GitHub forks.
  • Redux-Saga actually win the race if we talk about the community support, documentation, for the long-term use cases, testability and debugging sections.

  • 23
    Shares

2 Replies to “Redux Thunk Vs Redux Saga”

  1. Way cool! Some very valid points! I appreciate you writing this write-up plus the rest of the site is very good. Alidia Filippo Huxley

Comments are closed.