Why Use Redux Saga?

Flow Diagram of how React with Redux Saga

Have you ever thought why redux saga has gained so much popularity and is slowly becoming heart of any enterprise application. In this article I will walk you through the benefits of using redux saga. Also, this articles is for beginners to understand/decide when and why to use redux saga.

(Note: This article requires some basic understanding about ES6 generator functions. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)

At the end we will also see how to plug redux saga into any React application in just 3 steps:

Redux Saga as Middleware

Redux Saga is a middleware that takes over the control of you actions before reaching the reducer directly.

Original Working without redux saga:-

Action(s) → Reducer(s)

With Redux saga as middleware:-

Action(s) → Redux Saga →Reducer(s)

Redux saga acts as a middleware that gives developers the scope to neatly separate any business logic, xhr Requests(Popularly known as Ajax), data manipulation or any other operation which may not seem appropriate in reducers directly.

Note: Although redux saga talks about few things in terms of side-effects but we will not touch upon those topic(s) immediately for the sake of simplicity.

Why Use sagas?

Lets look at some quick benefits of using Saga:-

• Great support for Async Operations
• It takes care of basic needs like cancelling previous saga operation on start of new eg: cancel previous xhr call on typeahead search query.
• Resolving race conditions (Link)
• Running tasks in parallel (Link) and much more…..

Plugging in redux saga into your existing application:

you will need babel to transpile it into ES5 code (Link)

Step 1:

npm install --save redux-saga

Step 2:

Without Redux saga

import { createStore, applyMiddleware } from 'redux'

import reducer from './reducers'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer
)

With Redux Saga

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

*******************************
//Saga function

function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}
***********************************
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(watchFetchData)   // calling first saga here

const action = type => store.dispatch({type})

In the above code we are writing our first saga method which says that whenever action with type: FETCH_REQUESTED is fired it will call fetch data method. Similarly, we can register multiple methods in first saga eg:

import { takeEvery } from 'redux-saga/effects'

// FETCH_USERS
function* fetchUsers(action) { ... }

// CREATE_USER
function* createUser(action) { ... }

// use them in parallel
export default function* rootSaga() {
  yield takeEvery('FETCH_USERS', fetchUsers)
  yield takeEvery('CREATE_USER', createUser)
}

Step 3

Finally we will write what saga method does

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

export function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.url);
      // if needed, we can put some business logic here
      
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

I know a lot of you would be thinking what call and put are . We will try and build some understanding around it in next story. For now it would be sufficient to know that “call” effect takes first arguments as function name to be executed ie: invoke api.fetchUser with action.payload.url parameter and remaining as parameters to it and “put” can be considered as alias for store.dispatch({type:”FETCH_SUCCEEDED” , data: data});

I would come up with subsequent article in coming weeks and talk more about effects/async reducers/testing and advanced usage.

Hope you find this article helpful.