Watch/observe/monitor Redux store state changes
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Latest commit 1b97846 Nov 21, 2017
Permalink
Failed to load latest commit information.
test fix #3 Apr 15, 2016
.gitignore update README.md Apr 15, 2016
.travis.yml add travis config Apr 15, 2016
CHANGELOG.md 1.1.1 May 4, 2016
README.md Update README.md Nov 21, 2017
index.js fix #3 Apr 15, 2016
package.json 1.1.1 May 4, 2016

README.md

redux-watch

NPM Package Build Status

js-standard-style

Watch/observe Redux store state changes.

Why?

Redux provides you with a subscribe() method so that you can be notified when the state changes. However, it does not let you know what changed. redux-watch will let you know what changed.

Install

npm i --save redux-watch

Usage

watch(getState [, objectPath [, comparison]]) -> function

  • getState: A function that is used to return the state. Also useful in conjunction with selectors.
  • objectPath: An optional string or Array that represents the path in an object. Uses object-path (mariocasciaro/object-path) for value extraction.
  • comparison: An optional function to pass for comparison of the fields. Defaults to strict equal comparison (===).

Example

basic example
// ... other imports/requires
import watch from 'redux-watch'

// assuming you have an admin reducer / state slice
console.log(store.getState().admin.name) // 'JP'

// store is THE redux store
let w = watch(store.getState, 'admin.name')
store.subscribe(w((newVal, oldVal, objectPath) => {
  console.log('%s changed from %s to %s', objectPath, oldVal, newVal)
  // admin.name changed from JP to JOE
}))

// somewhere else, admin reducer handles ADMIN_UPDATE
store.dispatch({ type: 'ADMIN_UPDATE', payload: { name: 'JOE' }})
example (w/ reselect (reactjs/reselect) selectors)

When using with selectors, you often times won't need to pass the object path. Most times the selectors will handle this for you.

// ... other imports requires
import watch from 'redux-watch'

// assuming mySelector is a reselect selector defined somewhere
let w = watch(() => mySelector(store.getState()))
store.subscribe(w((newVal, oldVal) => {
  console.log(newVal)
  console.log(oldVal)
}))

Note on Comparisons.

By default, redux-watch uses === (strict equal) operator to check for changes. This may not be want you want. Sometimes you may want to do a deep inspection. You should use either deep-equal (substack/node-deep-equal) or is-equal (ljharb/is-equal). is-equal is better since it supports ES6 types like Maps/Sets.

deep equal example
import isEqual from 'is-equal'
import watch from 'redux-watch'

let w = watch(store.getState, 'admin', isEqual)
store.subscribe(w((newVal, oldVal, objectPath) => {
  // response to changes
}))

License

MIT

Copyright (c) JP Richardson