Which is better Redux-Thunk Or Redux-Saga

Which is better Redux-Thunk Or Redux-Saga

Being a Frontend Developer it is not easy to select which of them is good to use. Even I face challenges when I have to select for the first time, so here is my experience of how I select each of them for my projects

So let’s begin with an understanding of Redux

It is an open-source JavaScript library for managing and centralizing the application state. It is most commonly used with such as React or Angular for building user interfaces.

Now, what is Redux-Thunk and Redux-Saga?

It is a middleware or simply called an async function which is generally used for calling API and storing response data in redux store to remove side effects.

So What’s the difference between them?

So let first start with

Redux-Thunk:

It is a middleware that allows you to call the action creators that return an async function(thunk) which takes the store’s dispatch method as the argument which afterward is used to dispatch response of Api in redux store so side effects have been finished.

Let’s jump into code for better understanding.

Here is the example of how actions creators and thunk functions are written

example of how action creators are called:-

So I hope you are clear with the redux-thunk

Now let’s understand about Redux Saga

Redux-Saga:

It is also a middleware library that helps us with API calls or side effects. It uses an ES6 feature called ‘Generators’ which helps us to write asynchronous code.

Generators are the functions that came with ECMA Script 6. And the amazing part is that the generator functions can be paused between the execution or can even be exited and later re-entered.

To understand redux-saga better we need to compare simple async function with ECMA Script 6 generator function

Here is an example of the simple async function

Now compare it with the below code you will understand better

Redux Saga listens to the dispatched actions and triggers an API call or any other side effect you write.

So here is how actual code looks

Who Wins?

It is completely up to you to choose the right approach for your projects. I have used both Redux-Thunk and Redux-Saga, and I feel if you are working on a small or a medium scale project, you can choose Redux-Thunk. It will work like a charm. But on the other hand, for bigger projects, Redux-Thunk may sometimes get you in trouble, as it can be hard to scale if your side effect or asynchronous logic increases, whereas in the case of Redux-Saga, it comes power-packed with some amazing things such as concurrent side effects, canceling side effects, debouncing and is easy to scale.

To be honest, I love both tools. Choosing one is difficult as both have their advantages and disadvantages.

Overall Difference:

So what you are looking for is to jump the projects and start implementing them.

The further official link for more explanation:

https://redux.js.org/usage/writing-logic-thunks

https://redux-saga.js.org/docs/introduction/GettingStarted