https://github.com/bhovhannes/redux-profiler

A Redux store enhancer which uses User Timing API to profile redux actions and time spent on notifying store listeners
https://github.com/bhovhannes/redux-profiler

chrome-devtools profiler redux store-enhancer user-timing

Last synced: 2 months ago
JSON representation

A Redux store enhancer which uses User Timing API to profile redux actions and time spent on notifying store listeners

• Host: GitHub
• URL: https://github.com/bhovhannes/redux-profiler
• Owner: bhovhannes
• License: mit
• Created: 2018-09-24T20:43:33.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-04-14T08:38:41.000Z (9 months ago)
• Last Synced: 2024-04-14T09:53:44.547Z (9 months ago)
• Topics: chrome-devtools, profiler, redux, store-enhancer, user-timing
• Language: JavaScript
• Homepage:
• Size: 3.39 MB
• Stars: 13
• Watchers: 3
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# redux-profiler

[![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-url] [![MIT License][license-image]][license-url] [![Coverage][codecov-image]][codecov-url]

A Redux [store enhancer](https://redux.js.org/glossary#store-enhancer) which uses User Timing API to profile Redux actions and time spent on notifying store listeners

## How to install

```bash

npm install redux-profiler --save

```

## Usage

```javascript

import { createStore } from 'redux'

import profileStore from 'redux-profiler'

function todos(state = [], action) {

    switch (action.type) {

        case 'ADD_TODO':

            return state.concat([action.text])

        default:

            return state

    }

}

​

const store = createStore(todos, ['Use Redux'], profileStore())

```

You can also combine it with Redux middleware:

```javascript

import { createStore, compose } from 'redux'

import { thunk } from 'redux-thunk'

import profileStore from 'redux-profiler'

function todos(state = [], action) {

    switch (action.type) {

        case 'ADD_TODO':

            return state.concat([action.text])

        default:

            return state

    }

}

​

const store = createStore(

    todos,

    ['Use Redux'],

    compose(

        profileStore(),

        thunk

    )

)

```

or if you have multiple middlewares:

```javascript

import { createStore, applyMiddleware, compose } from 'redux'

import { thunk } from 'redux-thunk'

import profileStore from 'redux-profiler'

function todos(state = [], action) {

    switch (action.type) {

        case 'ADD_TODO':

            return state.concat([action.text])

        default:

            return state

    }

}

/**

 * Logs all actions and states after they are dispatched.

 */

const logger = store => next => action => {

    console.group(action.type)

    console.info('dispatching', action)

    let result = next(action)

    console.log('next state', store.getState())

    console.groupEnd()

    return result

}

​

const store = createStore(

    todos,

    ['Use Redux'],

    compose(

        profileStore(),

        applyMiddleware(

            thunk,

            logger

        )

    )

)

```

## License

MIT (http://www.opensource.org/licenses/mit-license.php)

[license-image]: http://img.shields.io/badge/license-MIT-blue.svg?style=flat

[license-url]: LICENSE

[npm-url]: https://www.npmjs.org/package/redux-profiler

[npm-version-image]: https://img.shields.io/npm/v/redux-profiler.svg?style=flat

[npm-downloads-image]: https://img.shields.io/npm/dm/redux-profiler.svg?style=flat

[codecov-url]: https://codecov.io/gh/bhovhannes/redux-profiler

[codecov-image]: https://codecov.io/gh/bhovhannes/redux-profiler/branch/master/graph/badge.svg?token=iJvUUKrgzB