redux-performance-middleware

This package supplies a lightweight middleware that gives you observability of your Redux reducer's performance.

Example

You can see an example of this middleware in use here.

Installation

With yarn:

yarn add @luckycatfactory/redux-performance-middleware

With npm:

npm install @luckycatfactory/redux-performance-middleware --save

Usage

It's easy to use the middleware. All you have to do is pass a callback on initialization:

import reduxPerformanceMiddleware from '@luckycatfactory/redux-performance-middleware';

const logActionPerformance = ({ action, elapsedTime }) => {
  // Maybe you just want a warning in the console.
  if (elapsedTime > 10) {
    customLogger('Warning: slow reducer action observed for the following action:', action);
  }
  // Or maybe you want to use distribution metrics of some kind to get a larger
  // picture of your Redux performance.
  customDistributionMetric({
    metric: 'redux_performance',
    tags: [`action_type:${action.type}`],
    value: elapsedTime,
  });
}

const middleware = reduxPerformanceMiddleware(logActionPerformance);

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

If you want to only use the middleware in development, you should do the following to prevent the package from being included in your bundle:

import reduxPerformanceMiddleware from '@luckycatfactory/redux-performance-middleware';

const middleware = [/* other middleware */];

if (process.env.NODE_ENV === 'development') {
  const logActionPerformance = ({ action, elapsedTime }) => {
    //...
  };

  const performanceMiddleware = reduxPerformanceMiddleware(logActionPerformance);

  middleware.push(performanceMiddleware);
}

const store = createStore(myReducer, applyMiddleware(...middleware));