You may ask yourself: Why do I need Redux Saga if I already have Redux? When working with React Native you will see there are many options for developers to manage the global state. In this blog post we will be talking about "Redux Saga" (RS),a middleware library used to allow a Redux store to interact with resources outside of itself asynchronously. I hope this blog post helps you analyze what the best tools for your next projects are!
Intro
Redux Saga allows us to use API calls and side effects. If you use RS you would be working all the statements using a single technology (it is one of the advantages of using RS). If you are not using it, the alternative you could use is using Redux with Fetch or Axios methods to make your API calls.
By using RS you can avoid having a more complicated code, besides it offers us different methods to manage the asynchronous ones.
What is Redux?
A brief explanation about Redux would be: it is a global store where you can save data to get it in other components in the case of React. Redux is independent; meaning it does not belong to a specific framework or library, so you can use it in any UI framework, such as Angular, Vue, Flutter, and React.
What is Redux Saga?
Redux Saga helps us to manage API calls or side effects. It uses “Generators” from ES6 and these help us to write asynchronous code.
What are Generators?
Generators are single functions and their execution is not continuous. It returns a value that is consumed by calling the generator’s “next” method.To create a generator you need to use “*function**” syntax. However, the generator function will be executed until it finds the “yield” keyword.
Example:
function* generator(i) {
yield i;
yield i + 10;
}
const gen = generator(10);
console.log(gen.next().value);
// expected output: 10
How does the Redux Saga work?
RS listens to the dispatched action and triggers the API call or side effect that you add.
Steps to add RS to your project.
Initial installation.
$ npm install redux-saga
Or
$ yarn add redux-saga
Create a file sagas.js and add the following code
Now let’s look into some important methods to make sure of RS behavior.
- TakeLatest: it automatically cancels any previously started Saga task (if it is still running).
- Fork: it starts the task and continues executing without waiting for it to complete.
- All: it creates an effect description that instructs the middleware to run multiple effects in parallel and it waits for all of them to complete the action. It will still work without it
- Call: it creates an effect description that instructs the middleware to call the function which either returns a promise as result or any other value with an array as arguments.
- Delay: it returns an effect descriptor to block execution for milliseconds and it returns val value
Add it to your js file to run our Saga
To sum up
RS works as a background process that is responsible for making our side effects or API calls.
We have many options to use in our projects, however, using RS is easier to scale if we compare it to Redux; besides, action creators stay pure.
I hope this blog post helps you analyze what the best tools for your next projects are!
