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-middlewareWith npm:
npm install @luckycatfactory/redux-performance-middleware --saveUsage
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));