Redux-Saga is a middleware library which is handling async tasks with side effects, such as API. Also, we are able to read the state and call actions on Saga. It uses generator functions in order to do async tasks.

The following outlines why we use Saga and how to install it. Then, it is discussed useful Saga methods for handling API.

Why we are using the Redux-Saga?

The main duty of the Saga is to handle the API calls and update the state based on the response of endpoints! One of the main advantages of redux-saga is being test-friendly.

Before working with Redux-Saga, you should be familiar with Redux.

For reading about Redux, click here.

How to install Redux-saga?

There are two ways to install the redux-saga based on your package manager:

npm install redux-saga


yarn add redux-saga

Then, you need to create an example redux middleware. For example:

import { call, put, takeEvery } from 'redux-saga/effects'
import Api from '...'

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});

function* mySaga() {
yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

export default mySaga;

In the example, when USER_FETCH_REQUESTED action dispatched, it sends a call request to the API. In case of success, it dispatches an action with type USER_FETCH_SUCCEEDED with the user payload. Otherwise, in case of error status, it dispatches an action with the type USER_FETCH_FAILED and the error message payload.

The API can be something like this:

import axios from 'axios';

const Api = {
fetchUser: (userId) => {
return axios.get(`...?userId=${userId}`)

export default Api;

Next, you need to add your saga to the redux store:

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware();

const store = createStore(

In the above code, the middleware of saga is created and applied to the store, finally, it runs.

Saga Methods

The most used methods will be explained in the following:


It reads from the selector (state), here is a sample of the select call.

const userId = yield select(userSelectors.getUserId);


It dispatches actions, for example:

yield put({type: "USER_FETCH_SUCCEEDED", user: user});


It calls an async function, such as API, for instance:

const user = yield call(Api.fetchUser, action.payload.userId);


It watches on each action dispatch to call a generator function.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);


It is the same as takeEvery the only difference is that when the previous call is pending doesn't call again.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);


Redux-saga is a library for handling async tasks in redux. In this article, it is discussed why and how to use Saga and the methods.

Web Developer