Step-By-Step: How to Add Redux Saga to a React & Redux App

Got no time? Clone the repo and get going!

git clone https://github.com/rajjeet/react-playbook
cd react-playbook/packages/redux-saga
npm install
npm start

Quick Setup

Checkout of my previous articles for setup code:

• React | Blog | GitHub
  • React-Redux | Blog | GitHub
    • Redux-Saga | GitHub

Step 1: Install redux-saga

npm install redux-saga

Step 2: Import the libraries

/src/configure-store.js

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";
...

The applyMiddleware is a helper function that adds functionality to our redux's dispatch function.

The default export of redux-saga, called createSagaMiddleware here, is a factory that creates an instance of the middleware.

The regenerator-runtime/runtime is imported to allow async actions to be transpiled by Babel without any issues. If this line is omitted, your app with fail with the following error message: Uncaught ReferenceError: regeneratorRuntime is not defined. Here's the GitHub issue, in case you're interested in the details.

Step 3: Create a root saga

/src/configure-store.js

function* exampleSaga() {
  console.log("Example saga reached");
}

Sagas are just generator functions. Unlike normal functions, which run to completion, generators can pause their executions for async statements using the yield keyword.

Like the root reducer (first argument of createStore), this saga acts as the root of a tree, where each tree nodes will be another saga. This allows us to collocate our sagas and reducers near the components that use them. It also keeps them manageable because they only contain code relevant to nearby files.

In our case, exampleSaga is just a normal function that executes once and terminates. We will explore the use of generators in laters tutorials.

Step 4: Create instance of saga middleware

/src/configure-store.js

const sagaMiddleware = createSagaMiddleware();

Execute our redux-saga default import to get an instance of the saga middleware.

Step 5: Apply the saga middleware to redux

/src/configure-store.js

export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));

The term applyMiddleware(sagaMiddleware) returns a store enhancer. Using the utility function applyMiddleware we can combine multiple middlewares and return a single store enhancer. The createStore accepts only a single store enhancer, thus the need for applyMiddleware. We would use an array of middlewares for multiple middlewares.

Step 6: Run the saga

/src/configure-store.js

sagaMiddleware.run(exampleSaga);

run() accepts a generator and kicks of the process that runs in the background. As we will see in future tutorials, from this process we can create multiple processes in parallel and perform many redux related functions. Also, note that this must run after applying the saga middleware.

The Redux-Saga Configured Store

Here's what our final store configuration looks like after integrating redux-saga.

/src/configure-store.js

import { createStore, applyMiddleware } from 'redux';
import { countReducer } from './counter/reducer';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";

function* exampleSaga() {
  console.log("Example saga reached");
}

const sagaMiddleware = createSagaMiddleware();

export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(exampleSaga);

It's simple but the bare minimum we need to get started using redux-saga in our app. Look out for future extension to this tutorial that dive deeper into redux-saga features and uses.