redux-watch

redux-watch

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()

Signature: watch(getState, [objectPath], [comparison])

Parameters:

• 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. Fully compatible with npm/object-path.
• comparison: An optional function to pass for comparison of the fields. Defaults to strict equal comparison (===). Could use npm/deep-equal.

Returns: A function that can be used to watch for the changes.

Example (basic):

// ... 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 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)
}))

License

MIT

Copyright (c) JP Richardson