Skip to content

Redux middleware which allows listening in on and handling of dispatched actions

License

Notifications You must be signed in to change notification settings

Gaya/redux-listeners

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Redux Listeners

npm version Build Status

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

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<Function(dispatch, action)> Same as .addListener, but now a list of multiple listeners.

License

MIT

About

Redux middleware which allows listening in on and handling of dispatched actions

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published