Custom Logging with SagaMonitor

Demonstrates how to customize the logging behaviour of SagaMonitor for specific saga events, improving readability and focus.

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

// Define a custom SagaMonitor
const customSagaMonitor = {
  // Handle action dispatched to the Store
  actionDispatched: (action) => console.log('Dispatching action:', action),
  // Handle saga effect triggered
  effectTriggered: (effect) => console.log('Saga effect triggered:', effect),
  // Handle saga effect resolved
  effectResolved: (effectId, result) => console.log('Saga effect resolved:', effectId, 'Result:', result),
  // Handle saga effect rejected
  effectRejected: (effectId, error) => console.log('Saga effect rejected:', effectId, 'Error:', error),
  // Handle saga effect cancelled
  effectCancelled: (effectId) => console.log('Saga effect cancelled:', effectId)
};

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

// Create Redux store with root reducer and apply saga middleware
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

This code snippet demonstrates how to create a custom SagaMonitor to log specific saga events. The customSagaMonitor logs actions dispatched to the store, effects triggered/resolved/rejected/cancelled by sagas, providing more insight into the saga execution process. It's then used to create the saga middleware, which is applied to the Redux store.