Observe Redux state changes and dispatch actions on change.
Assuming you're using
npm and a module bundler capable of consuming CommonJS
npm install --save redux-observers
First, create a
store object as you normally would, then create the necessary
observers and pass them as arguments to
const myObserver =
That's the gist of it.
observer([mapper], dispatcher, [options]) => observerFunc
Creates an observer.
mapper(state) => mappedState(Function)
Specifies which state slice(s) should be observed by returning a plain object (or any other value) extracted from the store's state. It is similar in vein to
mapperis provided, the entire store state is mapped by default.
dispatcher(dispatch, currentState, [previousState])(Function)
Called whenever the mapped-over state changes. Note that
previousStatemay be omitted from the
dispatchersignature if desired.
Note that if care is not exercised, infinite cycles may be created between
mapper and a
observe(store, observers, [options]) => unsubscribeFunc
store updates and applies given
observers over the
The Redux store object.
An array of (observer) functions, where each member must be the result of calling
A global options object, whose values are applicable only in the context of the provided
storemultiple times using the same
observers, but providing different global options, results in a different behavior, as prescribed by that
optionsobject). Any option provided here takes precedence over its default value.
A plain object that may be provided to
observe(,, options) to describe how
a set of observers must behave, or to
observer(,, options) to describe how
a particular observer must behave.
skipInitialCall(Boolean, defaults to
Specifies whether dispatchers must be called immediately after Redux dispatches its
If set to
false, dispatchers are initially called with an
undefined"previous" state; otherwise, and by default, a dispatcher is only called after the "previous" state is set (i.e., after
@@redux/INITis dispatched and the store's reducers had a chance to return their initial state).
equals: (currentState, previousState) => Boolean(Function, defaults to
Specifies how the previous state should be compared with the current one. Its return value must be a Boolean, which is used to determine whether a dispatcher should be called. Note that, by default, values are compared in a shallow manner via
shallowEquals(), which should satisfy most use cases.
shallowEquals(a, b) => Boolean
The default comparsion helper used by observers to determine whether two mapped-over values (be they plain objects or primitive values) are equal.