We can add Saga to our middleware using the following snippet. We can modify the configureStore.js file inside app/configureStore.js as follows:
import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'connected-react-router/immutable';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
const middlewares = [sagaMiddleware, routerMiddleware(history)];
const enhancers = [applyMiddleware(...middlewares)];
const store = createStore(
createReducer(),
fromJS(initialState),
compose(...enhancers),
);
// Extensions
store.runSaga = sagaMiddleware.run;
store.injectedReducers = {};
store.injectedSagas = {};
return store;
}
The most notable points are as follows:
- We are using the createSagaMiddleware factory function from redux-saga. To find out more about factory functions, consider reading the documentation website (https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html).
- We create the Saga middleware and pass it to the store.
To understand the concept of redux-saga, we will take the help of the pre-built REST API. We will discuss more about how these REST APIs are built in Chapter 8, Understanding the REST API. Without going more detail about how the REST API is constructed using Express and Node.js, we assume that we have an API that provides authentication and authorization and other required endpoints. We will discuss the endpoints as we use them.