Redux-Saga vs. Redux-Thunk: Key Differences With Examples

Managing UI state within complex web applications and mobile applications of present times is difficult for all developers/Engineers. Every dynamic web and mobile app needs to use asynchronous tasks. In this blog, we will discuss how we manage app UI states using Redux and what will be the most suitable and easiest middleware along with Redux for a project. We will also compare Redux-Saga vs. Redux-Thunk.

What is Redux?

Redux is a state management library and can be used with any library or framework. It is an open-source, cross-platform library for managing the application states. Redux is widely and easily used in many libraries, React, React-native, and others. The primary use of Redux is that we can use a single application state as a global state, and interacting with the state of the application from any component is very easy if they are parent or child.

what is redux

Installation

npm install redux redux-logger react-redux –-save

Data Flow in Redux

Redux follows a unidirectional data flow. 3 major components are in redux structure: ‘actions’, ‘reducers’, and the ‘store’. Other components are ‘components(UI)’, ‘Middlewares’, ‘Redux Thunk’.

Actions: Actions are JavaScript objects that contain payloads of information that send data from the application to the redux store. These are the only information sources for the redux store. That means if any state change is necessary for any reason, the change required will be dispatched through the actions. It has a ‘type’ property that specifies the type of the action we are performing and can also have a ‘payload’ property used to send some data to redux stores.

Example of an Action object

Example of an Action object

Reducers: Reducers are functions that determine the changes in the application state and return the updated state. Actions describe something happening inside but don’t specify how the application’s state changes in response. When an action is dispatched for state change, the reducer has to make the necessary changes to the state and return the new state of the application. They take action as the argument and update the state inside the redux store.

Example of Reducer object

Example of Reducer object

Store: A redux store can be created With the help of reducers which holds the entire state of the application. It is recommended to use a single store for the entire application rather than having multiple stores, which will violate the use of redux, which only has a single store.

Components (UI): This is the section where the UI of the application is kept.

Middlewares: Redux middleware is a function that sits between action and reducer and can contact the dispatched action before reaching the reducer function. Popular middleware libraries which allow for side effects and asynchronous activities, there are Redux-Thunk and Redux-Saga.

What is Redux Thunk?

The middleware lets you call the action creators that return a function instead of the action object after receiving the redux store’s dispatch method, which is used to dispatch the regular synchronous actions inside a function’s body after the asynchronous operations have been completed.

The thunk is a concept of idea in programming where a function is used to delay the evaluation and calculation of an operation inside an app.

Installation

npm install redux-thunk –-save

Redux-thunk Store object example

Redux-thunk Store object example

Example of  Redux Thunk

Example of  Redux Thunk

What is Redux Saga?

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. Surprisingly, the generator functions can be paused, resumed, exited between the execution, and re-entered later during the operations. The name of the generator function name can be changed as per requirement. I have used the fetchDashboardSaga( ) function.

The benefit of Redux Saga compared to Redux Thunk is that you can more easily test your asynchronous data flow inside an application.

Installation

npm install redux-saga –-save

Example of Store object of redux-saga

Example of Store object of redux-saga

Example of Action

Example of Action

A Generator function is that function that does not execute it at once; instead, it returns an iterator object. The function body is executed when calling the method on an iterator object until the “yield” keyword is inside the function.

The next() method returns an object with a property called “value,” which has some value, and the yield property has returned it. A “done” property stands for whether a function execution is completed or not.

Working of Redux Saga?

Redux Saga listens that the actions dispatched and triggers an API call or any other side effect of your written code.

Below is an example of how we can call an API endpoint using Redux Saga.

Example of a redux-saga

Example of a redux-saga

By calling the put function, we can trigger actions just like we did with dispatch. It allows adjusting and handling of our reducer to handle our actions.

Saga works like a separate thread or by a background process, So for that is only responsible for making side effects inside APIs or API calls, unlike redux-thunk, in some cases, which uses callbacks that lead to situations like ‘callback hell.’ Every time with the async/await system, this problem can be minimized in redux-thunk.

Example of reducer object

Example of reducer object

Thunks can’t ever act in response to an action. On the other hand, Redux-Saga subscribes to the redux store and will trigger a saga to run, pause or continue when an action is dispatched.

Redux ThunkRedux Saga
Action creators may hold too many async logic functionsAction creators stay pure functions
Contains less boilerplate codesContains more boilerplate codes than Redux-Thunk
Difficult to scale up codesEasy to scale codes as compared to redux-thunk codes
Difficult to test async functions Easy to test as all async logic remains together
As compared to redux-saga, easy to understand logic, functions, conceptsDue to multiple concepts to learn like generator functions and redux-saga effects, etc. It is difficult to understand.

 

coma

Conclusion

In this blog, we saw in detail the use of Redux, Redux-Thunk, and Redux-Saga, and the difference between Redux Saga vs. Redux Thunk.

Satyabrata

Tech Expert

Satyabrata is a React Native Developer with around 2+ years of experience in developing mobile applications. Skills like developing clean and reusable code, Creating responsive Mobile pages, API integration etc. 

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google