https://github.com/gaya/redux-listeners
Redux middleware which allows listening in on and handling of dispatched actions
https://github.com/gaya/redux-listeners
dispatch listeners middleware redux redux-middleware redux-store
Last synced: about 1 year ago
JSON representation
Redux middleware which allows listening in on and handling of dispatched actions
- Host: GitHub
- URL: https://github.com/gaya/redux-listeners
- Owner: Gaya
- License: mit
- Created: 2017-12-01T12:18:14.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T21:51:30.000Z (over 3 years ago)
- Last Synced: 2025-04-02T08:22:05.756Z (about 1 year ago)
- Topics: dispatch, listeners, middleware, redux, redux-middleware, redux-store
- Language: JavaScript
- Homepage:
- Size: 140 KB
- Stars: 10
- Watchers: 2
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Redux Listeners
[](https://www.npmjs.com/package/redux-listeners)
[](https://travis-ci.org/Gaya/redux-listeners)
Redux middleware which allows listening in on and handling of dispatched actions
```
npm install --save redux-listeners
```
## Who needs this?
For those who want to listen in on actions dispatched to the Redux store.
Includes the store's dispatch method to dispatch new actions after a listener is fired.
Much like `redux-saga`, but a way more toned down implementation which also allows for `async/await`.
## Example
```js
import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from 'redux-listeners';
// import your reducers
import rootReducer from './reducers';
// create action middleware
const listenMiddleware = createMiddleware();
const store = createStore(
rootReducer,
applyMiddleware(listenMiddleware),
);
// register listeners to middleware
listenMiddleware.addListener('INIT', (dispatch) => {
dispatch({ type: 'FETCH_DATA' });
});
listenMiddleware.addListener('FETCH_DATA', (dispatch) => {
fetch('/some-data')
.then(response => response.text())
.then(text => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: text }))
.catch(err => dispatch({ type: 'FETCH_DATA_FAILED', payload: err }));
});
listenMiddleware.addListener('FETCH_DATA_FAILED', (dispatch, action) => {
// display the error in console by reading the action
console.error(action.payload.message);
});
store.dispatch({ type: 'INIT' });
// This will fire the 'INIT' listener
// Which in turn dispatches the 'FETCH_DATA' action
// 'FETCH_DATA' listener is fired and asynchronously dispatches response actions
```
## Usage
### `createMiddleware()`
Creates the middleware you can pass into Redux.
*Returns* `middleware: Function`
### `middleware.addListener(actionType, listener)`
Binds `listener` function for each `actionType` dispatched to the redux store.
- `actionType: String | Array` The action type or an array of action types to match.
- `listener: Function(dispatch, action)` The function which will be called when an action of specified types is dispatched. Will receive `dispatch` and `action` as arguments to dispatch new actions and read the action being dispatched.
### `middleware.addListeners(actionType, ...listeners)`
- `actionType: String | Array` Same as `.addListener`.
- `...listeners: Array` Same as `.addListener`, but now a list of multiple listeners.
## License
MIT