Basic SagaMonitor Setup

Shows how to integrate SagaMonitor into a Redux-Saga configuration to begin monitoring saga effects.

import createSagaMiddleware from 'redux-saga';
import { applyMiddleware, createStore } from 'redux';
import rootReducer from './reducers'; // Import your root reducer
import rootSaga from './sagas'; // Import your root saga
import SagaMonitor from '@redux-saga/simple-saga-monitor'; // Import SagaMonitor

First, we import necessary modules from redux, redux-saga, and the @redux-saga/simple-saga-monitor package. We also import our root reducer and root saga, which we will need to set up the store and the saga middleware.

// Create the saga middleware with SagaMonitor
const sagaMiddleware = createSagaMiddleware({ sagaMonitor: SagaMonitor });

Then, we create the saga middleware and pass the SagaMonitor as a configuration option to enable saga effect monitoring.

const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware)
);

After creating our saga middleware with the SagaMonitor configured, we use redux's createStore function along with applyMiddleware to create our store. Here, rootReducer is the combined reducers of your application.

sagaMiddleware.run(rootSaga);

Finally, we start our sagas using the sagaMiddleware.run method and pass our rootSaga. This starts the SagaMonitor as well, and you will now be able to monitor the saga effects in your application.