After reading this blog, you will be able to understand the brief about what is redux-saga. Also you able to install, configure, and create the basic saga in your application. So, before we get any deeper, it’s important to note, that the actual term “saga”.
A saga in general programming series of reversible transactions, the saga is designed to replace single huge, locking transactions.
eg: Deposit in a bank would require a change in different spreadsheets, the traditional way requires locking all these spreadsheets changing a value then unlocking them
Whereas in functional programming, in the saga, you can break the transactions into small steps, and if there was any error along the way you can reverse all the steps that you’ve taken. Now, to manage all this, saga uses a process manager to keep track of what’s been done and what other actions need to be taken.
What is Redux-Saga?
Redux-saga is a redux middleware library, that is designed to handle side effects in your redux app nice and simple. It achieves this by leveraging an ES6 feature called Generators, allowing us to write asynchronous code that looks synchronous, and is very easy to test.
Why use Redux-Saga?
- Facilitates side-effects (API calls, database transactions) in your redux application.
- Advanced tool (forking processes, yielding thread) covers almost all the real-world cases.
- More sophisticated than redux-thunk and provides way more features than redux-thunk.
Configure and installation of Redux saga
Step 1: Initially, you have to install the redux-saga using the command given below:
sudo npm install redux-saga –save
Step 2: Let’s go to our getstore.js file. Here, first, we import redux-saga middleware utility from redux-saga. Import it we can say that saga middleware is equal to the invocation of the create saga middleware.
So here in the given example, it shows how we can create a saga-middleware and add the saga-middleware to the middleware chain. You may add the log here to check everything is working fine or not.
import createSagaMiddleware from ‘redux-saga’;
export const getStore = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware];
}
Now, we will create a directory named sagas under the src folder, and create one file in it, you can name it anything you like but here in my example, I set it as current-directory-saga.js.
In this file, we will create a function generator and in which we are pausing the code for a certain period of time. For that, we used delay which is another utility for redux-saga and we add yield here which takes care of the statement in a way that it will not jump to the next line of code until it completes, i.e, it can delay a subsequent code and can work only in generator functions.
eg:
import {delay} from ‘redux-saga’;
export function* currentUserSaga() {
while(true) {
yield delay(1000);
console.log(‘user saga loop’);
}
}
Now, we will create another file name index.js file under the saga directory here in this file we will import saga file which we have created earlier like we saw before.
import {currentUserSaga} from ‘./create-user-saga’;
In the next step, we will create another file named initSaga.js in the root directory src. This file will contain a method that takes the saga middleware and runs all the saga through it.
So here, we will import all the saga by importing index.js file in which we create a function name initSaga like shown below:
import * as sagas from ‘./sagas’;
export const initSagas = (sagaMiddleware) => {
Object.values(sagas).map(sagaMiddleware.run.bind(sagaMiddleware));
}
So it will take all the values of exported sagas and then each of them calls the saga middleware and making sure you keep the scope correct.
In the last step, we will again go to getStore.js file and import initSaga and call at the bottom of this method.
import {initSaga} from ‘./initiSagas’;
export const getStore = ()=>{
const sagaMiddleware = createSagaMiddleware();
const middleWares = [sagaMiddleware, thunk];
if (getQuery()[‘logger’]) { middleWares.push(logger)}
const composables = [applyMiddleware(…middleWares)]
const enhancer = compose(
… composables
);
const store = createStore(
reducer,
defaultState,
enhancer
);
console.log(‘sagaMiddleware’);
initSagas(sagaMiddleware);
return store;
};
NOTE: Saga can only be initialized when saga-middleware is placed inside the store.
I would come up with another blog in the coming days and talk about some Redux-Saga side effects. I hope you were able to grasp something from this article.
Thanks for Reading…
