A Redux store enhancer which uses User Timing API to profile Redux actions and time spent on notifying store listeners
npm install redux-profiler --saveimport { 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
)
)
)