redux-action-watch
redux-action-watch
provides feature to listen action dispatched to redux.
- You can watch for a redux action dispatch.
- Provides some helpers to register you own function as watcher like,
onAction
,onActionOnce
,subscribeActions
. - It can act as IPC (inter-process communication) b/w components.
I don't think, we should only dispatch action to make changes in flux/redux state. Action can either change state or acknowledge that something happen.
Installation
You should install it as dependency:
$ npm install --save redux-action-watch
Setup with redux
app.js / index.js
;; // optional;;;// import { middleware, reducer } from 'redux-action-watch'; const initialState = {};// Important! name redux-action-watch reducer in your redux.const actionWatcherStateName = 'watcher';const reducersWithActionWatchReducer = Object; // generate middlewareconst actionWatchMiddleware = ; const store =
How to use
Container
;; const mapPropsToDispatch = // bind dispatch function subscribeActions: unsubscribeActions: onActionOnce: ; null mapPropsToDispatchComponent;
Component
;;; Component { thisunsubscribe = thisprops; /* --------------------------or--------------------------------- this.watchMeta = { ACTION_A: fn1, ACTION_B: [fn2, fn3]; }; this.unsubscribe = this.props.subscribeAction(this.watchMeta); --------------------------or--------------------------------- // if you want to auto unsubscribe after once call. this.props.onActionOnce(ACTION_A, callMeOnceFunction); */ } { this; } { // Your code ........ }
Documentation
Note:- All functions should first call with dispatch
-
subscribeAction(dispatch)(listenersObj)
It can register watcher for more than one actions.
Argument
listenersObj
: It should be an object where keys will be actiontype
and value will be listener or array of listeners. Example:{ ACTION_A: func1, ACTION_B: [func2, func3] }
.
Returns
unsubscribeFunc
: It returns function. Which should invoke to unsubscribe those listeners. -
unsubscribeAction(dispatch)(listenersObj)
It can un-subscribe actions which subscribe bysubscribeAction
function. It takes samelistenersObj
used at time of subscription.
Argument
listenersObj
: Same as above. -
onAction(dispatch)(actionType, listener)
It can register a watcher/listener for a action.
Arguments
actionType
: Type/name of action. Example,const action = { type: ACTION_A }
. HereACTION_A
is actionType.
listener
: Function which will be invoke on action dispatch.
Returns
unsubscribeFunc
: It returns function. Which should invoke to unsubscribe that listener. -
onActionOnce(dispatch)(actionType, listener)
It can register a watcher/listener for a action. And it will automatically un-subscribe after once invoke.
Arguments
actionType
: Type/name of action. Example,const action = { type: ACTION_A }
. HereACTION_A
is actionType.
listener
: Function which will be invoke on action dispatch.
Returns
unsubscribeFunc
: It returns function. You can unsubscribe without once invoke.
Development
Want to contribute? Great!
- Clone this repo
- Make changes
- Run test case
npm run test
- Create pull request
Todos
- Write example application
License
MIT