npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-observers

v3.0.0

Published

Observe Redux state changes and dispatch actions on change

Downloads

4,367

Readme

redux-observers

Build Status Coverage Status NPM Version

Observe Redux state changes and dispatch actions on change.

Installation

Assuming you're using npm and a module bundler capable of consuming CommonJS modules:

npm install --save redux-observers

Usage

First, create a store object as you normally would, then create the necessary observers and pass them as arguments to observe():

import { observer, observe } from 'redux-observers'

const myObserver = observer(
  state => state.slice.of.interest,
  (dispatch, current, previous) => {
    expect(previous).to.be.ok()
    expect(current).to.not.eql(previous)
    dispatch({ type: 'SLICE_CHANGE', payload: {...} })
  }
)

observe(store, [myObserver, ...myOtherObservers])

That's the gist of it.

API

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 mapStateToProps() provided by react-redux.

    If no mapper is provided, the entire store state is mapped by default.

  • dispatcher(dispatch, currentState, [previousState]) (Function)

    Called whenever the mapped-over state changes. Note that previousState may be omitted from the dispatcher signature if desired.

  • options (Object)

    A local options object, whose values are applicable only in the context of the returned observerFunc. Any option provided here takes precedence over its global and default equivalents.

Note that if care is not exercised, infinite cycles may be created between a mapper and a dispatcher.

observe(store, observers, [options]) => unsubscribeFunc

Listens for store updates and applies given observers over the store state.

  • store (Object)

    The Redux store object.

  • observers (Array)

    An array of (observer) functions, where each member must be the result of calling observer().

  • options (Object)

    A global options object, whose values are applicable only in the context of the provided observers (i.e., observe()ing a store multiple times using the same observers, but providing different global options, results in a different behavior, as prescribed by that options object). Any option provided here takes precedence over its default value.

Options

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

    Specifies whether dispatchers must be called immediately after Redux dispatches its @@redux/INIT action.

    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/INIT is dispatched and the store's reducers had a chance to return their initial state).

  • equals: (currentState, previousState) => Boolean (Function, defaults to shallowEquals)

    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.