redux-perf-middleware
Measure the time that the actions need to change the state
Install
Usage
import perflogger from 'redux-perf-middleware';
const createStoreWithMiddleware = applyMiddleware( perflogger )(createStore);
const store = createStoreWithMiddleware(reducer);This project adheres to Semantic Versioning.
Example
Dumb Reducer
function slow(){
let sum;
for(let i = 0; i< 10000; i++){
for(let j = 0; j< 10000; j++)
{
sum = i+j;
}
}
return sum;
}
export const Elements = function ( state = {}, action ) {
switch ( action.type )
{
case 'SLOW':
return slow();
default:
return state;
}
};Dumb Component
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Input extends Component {
/**
* Renders the markup for the topbar
*/
render() {
const { dispatch } = this.props;
return (
<input onKeyDown={ () => dispatch({ type: 'SLOW' })} />
);
}
};
const selector = function( { default: elements } ){
return elements;
}
export default connect(selector)( Input );On every keydown Redux will dispatch the action with type SLOW, and in the console the middleware will log something like:
Or check the sample app
Contributing
Feel free to open issues, make suggestions or send PRs. This project adheres to the Contributor Covenant code of conduct. By participating, you are expected to uphold this code.
Contact
Twitter: @avraamakis
License
MIT