https://github.com/avraammavridis/redux-perf-middleware

Redux performance middleware, Measure the time that the actions need to change the state
https://github.com/avraammavridis/redux-perf-middleware

adheres measure middleware react redux redux-perf-middleware

Last synced: 11 days ago
JSON representation

Redux performance middleware, Measure the time that the actions need to change the state

• Host: GitHub
• URL: https://github.com/avraammavridis/redux-perf-middleware
• Owner: AvraamMavridis
• Created: 2016-01-14T18:40:17.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-11-07T00:24:04.000Z (almost 6 years ago)
• Last Synced: 2024-04-25T07:44:07.552Z (7 months ago)
• Topics: adheres, measure, middleware, react, redux, redux-perf-middleware
• Language: JavaScript
• Homepage:
• Size: 93.8 KB
• Stars: 52
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# redux-perf-middleware

[![npm version](https://badge.fury.io/js/redux-perf-middleware.svg)](https://badge.fury.io/js/redux-perf-middleware) [![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()

[![semantic-versioning](https://img.shields.io/badge/semantic%20-versioning-green.svg)]()

Measure the time that the actions need to change the state

### Install

[![NPM](https://nodei.co/npm/redux-perf-middleware.png?mini=true)](https://nodei.co/npm/redux-perf-middleware/)

### Usage

```javascript

import perflogger from 'redux-perf-middleware';

const createStoreWithMiddleware = applyMiddleware( perflogger )(createStore);

const store = createStoreWithMiddleware(reducer);

```

This project adheres to [Semantic Versioning](http://semver.org/).

### Example

**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:

![perflogger](http://oi68.tinypic.com/2h37fqb.jpg)

Or check the [sample app](https://github.com/AvraamMavridis/redux-perf-middleware/tree/master/app)

## Contributing

Feel free to open issues, make suggestions or send PRs.

This project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/). By participating, you are expected to uphold this code.

## Contact

Twitter: [@avraamakis](https://twitter.com/avraamakis)

### License

MIT