Use the listener pattern with Redux middleware.
To add the middleware to your store:
const createReduxListen = require('redux-listen')
const listenStore = createReduxListen()
const store = createStore(reducer, applyMiddleware(listenStore.middleware))
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.
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.
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
.
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.
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.