README

Saga Watcher

Simple, and configurable redux-saga monitor.

Define a custom getMessage function to filter out unwanted effects and build a custom message (see the default implementation for example).

By default, all effects are recorded in the mainStore array, which is used to identify the parent effect. Define a custom cleanStore function to customize the logic for cleaning the array.

Installation

Yarn

$ yarn add saga-watcher -D

NPM

$ npm install saga-watcher --save-dev

Configuration

const defaultConfig = {
  rootSagaStart: false, // show root saga start effect
  effectTrigger: true, // show triggered effects
  effectResolve: false, // show resolved effects
  effectReject: false, // show rejected effects
  effectCancel: false, // show cancelled effects
  actionDispatch: false, // show dispatched actions
  styles: ['font-weight: bold;'].join(''), // styles for the message box
  showDataWithMessage: true, // shows current and parrent effects along with the message
  getMessage: ({ current, parent, mainStore }) =>
    getMessage({ current, parent, mainStore }), // function that lets you filter unwanted effects and build a custom message
  cleanStore: ({ current, parent, mainStore }) =>
    cleanStore({ current, parent, mainStore }),
} // function that returns a clean store

Usage

With default config

import createSagaWatcher from 'saga-watcher'

const middleware = [
  createSagaMiddleware({
    sagaMonitor: createSagaWatcher(),
  }),
]

With custom config

import createSagaWatcher from 'saga-watcher'

// custom functions to override defaults
const buildCustomMessage = ({ current, parent, mainStore }) =>
  return 'custom message'
const customCleanStore = ({ current, parent, mainStore }) =>
  current && parent
    ? mainStore.filter(e => e.effectId !== current.effectId)
    : mainStore

// configuration
const config = {
  getMessage: ({ current, parent, mainStore }) => buildCustomMessage({current, parent, mainStore}),
  cleanStore: ({ current, parent, mainStore }) =>
    customCleanStore({ current, parent, mainStore }),
}

const middleware = [
  createSagaMiddleware({
    sagaMonitor: createSagaWatcher(config),
  }),
]

Run $LogSagas() in the developer console to display a snapshot of all the available sagas.

Run $LogStore() in the developer console to display effects store.

Run $LogTotalMessages() in the developer console to display the number of displayed messages.

Credits

This was adapted from the sagaMonitor example in the redux-saga repository and clarketm / saga-monitor.

Usage no npm install needed!