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