Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/codebrahma/redux-action-watch
Watch/Listen actions dispatched to redux.
https://github.com/codebrahma/redux-action-watch
react redux
Last synced: about 2 months ago
JSON representation
Watch/Listen actions dispatched to redux.
- Host: GitHub
- URL: https://github.com/codebrahma/redux-action-watch
- Owner: Codebrahma
- License: mit
- Created: 2016-10-14T13:59:06.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-28T05:36:38.000Z (almost 7 years ago)
- Last Synced: 2024-11-14T05:08:36.680Z (3 months ago)
- Topics: react, redux
- Language: JavaScript
- Homepage: https://npmjs.com/package/redux-action-watch
- Size: 13.7 KB
- Stars: 11
- Watchers: 22
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# redux-action-watch
[](https://travis-ci.org/Codebrahma/redux-action-watch)
[](https://coveralls.io/github/Codebrahma/redux-action-watch?branch=master)
**`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:
```sh
$ npm install --save redux-action-watch
```
### Setup with redux
app.js / index.js
```javascript
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**
```javascript
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**
```javascript
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