redux-performance-plus
v1.0.0
Published
A Redux performance measurement middleware, with additional tooling
Downloads
3
Readme
Redux Performance Plus
This is a utility and convenience library for measuring Redux action timings. It uses performance-plus to access the browser-based performance API, with support for IE8+.
You can pass a custom action duration limit, where actions exceeding that timing limit (in ms) are passed to an onSlow
callback with relevant data.
Example Usage
import { applyMiddleware } from 'redux';
import performance from 'redux-peformance-plus';
const middlewares = applyMiddleware(
performance({
limit: 83, // 83ms is ~ 5 animation frames
onSlow: (action) => {
console.warn(`${action.type} took ${action.duration().toFixed(2)ms}`, {
mean: action.mean(),
sampleSize: action.samples().length,
'95th_perc': action.percentile(0.95)
})
}
})
);
export default middlewares;
Installation
$ npm install redux-performance-plus --save
Configuration
The middleware constructor takes one argument with options.
// Default configuration, no behavior
applyMiddleware(performance());
// Default configuration, log all actions
applyMiddleware(performance({
onSlow: (action) => {
console.log(`${action.type} took ${action.duration().toFixed(2)ms}`);
}
}));
// Custom configuration, log all actions taking over 100ms
applyMiddleware(performance({
limit: 100,
onSlow: (action) => {
console.log(`${action.type} took ${action.duration().toFixed(2)ms}`);
}
}));
Action Methods
The action data passed to onSlow
contains the original action (with type
, etc.), along with these methods:
action.type // unchanged
action.duration(); // latest duration for action type, in ms
action.mean(); // mean duration, in ms
action.sdev(); // standard deviation of mean duration, in ms
action.samples(); // all measures for this action type
action.percentile(0.5); // Percentile duration for recorded samples of this aciton type