redux-watch
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/redux-watch package

    1.2.0 • Public • Published

    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

    Install

    npm i redux-watch

    DownloadsWeekly Downloads

    12,842

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    5.71 kB

    Total Files

    4

    Last publish

    Collaborators

    • jprichardson
    • chalker