redux-observer

Redux middleware for observing state change and taking action when changes of interest occur.

Installation

Install using npm:

$ npm install redux-observer

Usage

import { createStore, applyMiddleware } from 'redux';
import observer from 'redux-observer';
import rootReducer from './reducers/index';
 
const updateHandler = (nextState, prevState) => {
  // do something
}
 
// Create a store with observer middleware:
const createStoreWithMiddleware = applyMiddleware(
  observer(updateHandler)
)(createStore);

redux-observer takes a callback function and runs that function with the new and previous states any time the last dispatched action changes state in an interesting way. By default, the comparison function applied just checks that the two states are not strictly equal, but the comparison can be overridden by specifying options.compareWith.

Available Options

The following options may be specified when creating a CSRF prefilter:

compareWith(nextState, prevState)

Comparison function to be used when deciding whether to call the update callback. By default, a strict === comparison is done.

Note: the result of this callback is effectively negated, i.e., if this callback returns true, the update handler will not be called, and vice versa.

Example:

const createStoreWithMiddleware = applyMiddleware(
  observer(updateHandler, { compareWith: _.isEqual })
)(createStore);

Motivation

This middleware was derived out of an experiment with using Redux in a Backbone app, where more granular state changes needed to be tracked in order to keep DOM updates performant, leaving the default Redux store subscribe method mostly useless.

Changelog

1.0.0

• Initial release

License

MIT