Skip to content
👂 Use the listener pattern with Redux middleware.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.babelrc
.eslintrc
.gitignore
.prettierrc
.travis.yml
LICENSE.txt
README.md
index.js
package-lock.json
package.json
test.js

README.md

Redux Listen

Build Status

Use the listener pattern with Redux middleware.

Middleware

To add the middleware to your store:

const createReduxListen = require('redux-listen')
const listenStore = createReduxListen()
const store = createStore(reducer, applyMiddleware(listenStore.middleware))

addListener

To add a listener:

listenStore.addListener(SET_VAR, ({ action, getState, dispatch }) => {
  // ...
})

Now, whenever the action with the type SET_VAR dispatches, the middleware will call the function.

listenStore.addListener(/^FAIL_.*$/, ({ action, getState, dispatch }) => {
  // ...
})

You can also listen for actions where the action type matches a RegExp.

listenStore.addListener('*', ({ action, getState, dispatch }) => {
  // ...
})

A * listener will trigger on every action.

You may set multiple listeners to the same action. We will check and call listeners in the order received.

Don't be afraid to call getState often, it's basically free.

addListener will return fn -- the second argument -- back, so you can export the returned value for unit testing.

addListeners

To add many listeners:

// Or add many listeners
listenStore.addListeners({
  [SET_VAR]({ action, getState, dispatch }) {
    // ...
  },
  [SET_OTHER_VAR]({ action, getState, dispatch }) {
    // ...
  },
})

The advantage of adding using the "many" syntax is you get named functions for free. Also in this case, whenever the action with the type SET_VAR dispatches, the middleware will call the function.

listenStore.addListeners({
  [FETCH_USERS]({ dispatch }, done) {
    fetchUser({ id: '1' }).then(() => {
      dispatch({ type: FETCH_USERS_SUCCESS })
      dispatch({ type: FETCH_NOTICES })
      done()
    })
  },

  [FETCH_NOTICES]({ getState, dispatch }, done) {
    fetchNotices({ userToken: getState().userToken }).then(() => {
      dispatch({ type: FETCH_NOTICES_SUCCESS })
      done()
    })
  },
})

To chain network requests: dispatch an action when the first call is done, then listen for what you've dispatched. You can also condition your chaining based on action or state properties.

addListeners will return what you give back, so you can export the returned value for unit testing.

removeListeners

There's four ways to use removeListeners.

listenStore.removeListeners()

With no arguments, the middleware removes all listeners.

listenStore.removeListeners({ type: 'SET_VAR' })

With type, the middleware removes all listeners with the matching type.

listenStore.removeListeners({ fn: listenerFn })

With fn, the middleware removes all listeners with the same callback function.

listenStore.removeListeners({ type: 'SET_VAR', fn: listenerFn })

You can also use both type and fn to remove listeners that match BOTH -- but not only type or only fn.

REDUX_LISTEN_RESOLVE

Got some async going on, and need to know when you're done "asyncing"?

listenStore.addListener('SET_VAR', ({ action, getState, dispatch }, done) => {
  myPromise.then(() => {
    done()
  })
})

listenStore.addListener('REDUX_LISTEN_RESOLVE', () => {
  alert('We are done asyncing! Page ready!')
})

dispatch({ type: 'SET_VAR' })

There's a second real argument to the callback of addListener: done. If you ask for done, that means you have something async going on in that listener. Call done when that callback is totally finished. After you've called every done, we dispatch { type: 'REDUX_LISTEN_RESOLVE' }.

Don't call for done on a listener to REDUX_LISTEN_RESOLVE. If you do, it will never trigger.

isPending

listenStore.isPending()

You'll get a true if you still have something asyncing, and false if the middleware isn't waiting on anything.

redux-listen
Copyright 2018 Kevin Heis and [contributors](https://github.com/heiskr/redux-listen/graphs/contributors)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You can’t perform that action at this time.