Measure the time that actions needs to change the state
npm install redux-perf-middleware ![CocoaPods]()
![semantic-versioning]()
Measure the time that the actions need to change the state
``javascript
import perflogger from 'redux-perf-middleware';
const createStoreWithMiddleware = applyMiddleware( perflogger )(createStore);
const store = createStoreWithMiddleware(reducer);
`
This project adheres to Semantic Versioning.
Dumb Reducer
`javascript
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
`javascript
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 (
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
Twitter: @avraamakis