Home

Awesome

Build Status Coverage Status npm

redux-tap

Simple side-effect middleware for Redux.

$ npm install --save redux-tap

Usage

import { createStore, applyMiddleware } from 'redux';
import tap from 'redux-tap';
import rootReducer from './reducers';

// For example, select any action with metadata:
const selectMeta = action => action.meta;

// Once selected, access the selected value, action and store:
const middleware = tap(selectMeta, (meta, action, store) => {
  // In this case, we'll simply log to the console:
  console.log(meta, action, store);
});

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

As a real-world example, you can use redux-tap to declaratively track analytics events:

import { createStore, applyMiddleware } from 'redux';
import tap from 'redux-tap';
import rootReducer from './reducers';
import { track } from 'my-analytics-lib';

const selectAnalytics = ({ meta }) => meta && meta.analytics;
const middleware = tap(selectAnalytics, ({ event, data }) => {
  track(event, data);
});

const store = createStore(
  rootReducer,
  applyMiddleware(middleware)
);

// Now, you can declare analytics metadata on any action:
dispatch({
  type: 'REPO_STARRED',
  payload: { id },
  meta: {
    analytics: {
      event: 'Repo Starred',
      data: { id }
    }
  }
});

License

MIT License