{"library":"redux-user-timing","title":"Redux User Timing Middleware","description":"redux-user-timing is a Redux middleware designed to integrate Redux action dispatching with the browser's User Timing API, enabling performance profiling of Redux applications within tools like Chrome DevTools. The current stable version is `1.0.2`, released in January 2019. The package has seen no significant updates or active development since then, indicating a maintenance state. Its primary differentiator is its straightforward approach to leveraging a native browser API (`performance.mark()` and `performance.measure()`) for performance measurement, specifically marking Redux action lifecycles. It is explicitly intended for development environments only and does not provide advanced profiling features beyond basic action timing.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install redux-user-timing"],"cli":null},"imports":["import userTiming from 'redux-user-timing';","const userTiming = require('redux-user-timing');","import { applyMiddleware } from 'redux';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport userTiming from 'redux-user-timing';\n\n// A minimal reducer for demonstration\nconst rootReducer = (state = { count: 0 }, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n};\n\nconst configureStore = initialState => {\n  const middlewares = [];\n\n  // Recommend to add redux-user-timing as a last middleware and only in development.\n  if (process.env.NODE_ENV !== 'production') {\n    middlewares.push(userTiming);\n  }\n\n  const store = createStore(\n    rootReducer,\n    initialState,\n    applyMiddleware(...middlewares)\n  );\n\n  return store;\n};\n\nconst store = configureStore();\n\nconsole.log('Initial state:', store.getState());\nstore.dispatch({ type: 'INCREMENT' });\nconsole.log('State after dispatch:', store.getState());\n\n// In a browser, open DevTools -> Performance tab to see User Timing marks.","lang":"javascript","description":"This example demonstrates how to configure a Redux store with `redux-user-timing` middleware, ensuring it's only active in non-production environments for performance profiling.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}