redux-profiler's Introduction

redux-profiler

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

How to install

npm install redux-profiler --save

Usage

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:

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:

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
        )
    )
)