redux-action-watch

Watch actions dispatched to redux.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
redux-action-watch
1.0.67 years ago8 years agoMinified + gzip package size for redux-action-watch in KB

Readme

redux-action-watch
Build Status Coverage Status
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
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import thunk from 'redux-thunk'; // optional
import reducers from './reducers';
import actionWatchMiddlewaregenerator from 'redux-action-watch/lib/middleware';
import actionWatchReducer from 'redux-action-watch/lib/reducer';
// import { middleware, reducer } from 'redux-action-watch';

const initialState = {};
// Important! name redux-action-watch reducer in your redux.
const actionWatcherStateName = 'watcher';
const reducersWithActionWatchReducer = Object.assign({}, reducers, {
    [actionWatcherStateName]: actionWatchReducer,
});

// generate middleware
const actionWatchMiddleware = actionWatchMiddlewaregenerator(actionWatcherStateName);

const store = createStore(
  combineReducers(reducersWithActionWatchReducer),
  initialState,
  compose(
    /** configure middlewares with redux */
    applyMiddleware(actionWatchMiddleware, thunk),
    /** optional, redux dev tool */
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
)

How to use

Container
import { connect } from 'react-redux';
import {
    onAction,   // takes a action and a listener.
    onActionOnce,   // takes a action and a listener, will called only once.
    subscribeActions,   // takes multiple actions and listners.
} from 'redux-action-watch/lib/actionCreators';

const mapPropsToDispatch = dispatch => ({
    // bind dispatch function
    subscribeActions: subscribeActions(dispatch),
    unsubscribeActions: unsubscribeActions(dispatch),
    onActionOnce: onActionOnce(dispatch),
});

export default connect(null, mapPropsToDispatch)(Component);

Component
import React from 'react';
import { LOGIN_SUCCEEDED, LOGIN_FAILED } from './../actions';
import Notifier from './notifier';

class LoginForm extends React.Component {

    componentDidMount() {
        this.unsubscribe = this.props.onAction(LOGIN_FAILED, (action) => Notifier.show(action.error));
        /*
        --------------------------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);
        */
    }
    
    componentWillUnmount() {
        this.unsubscribe();
    }
    
    render() {
        // 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 action type 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 by subscribeAction function. It takes same listenersObj 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 }. Here ACTION_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 }. Here ACTION_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