redux-devtools/packages/redux-devtools-instrument
Nathan Bierema b82de74592
Add ESM builds (#997)
* Use rollup for d3tooltip

* Use rollup for map2tree

* Set moduleResolution

* Use rollup for d3-state-visualizer

* Use rollup for react-base16-styling

* Use rollup for react-dock

* Use rollup for react-json-tree

* Use rollup for redux-devtools

* Use rollup for redux-devtools-intrument

* Use rollup for redux-devtools-chart-monitor

* Update export

* Use rollup for redux-devtools-dock-monitor

* Use rollup for redux-devtools-inspector-monitor

* Fix inspector demo

* Fix invalid eslint config

* Use rollup for inspector-monitor-test-tab

* Use rollup for inspector-monitor-trace-tab

* Use rollup for redux-devtools-log-monitor

* Use rollup for redux-devtools-remote

* Use rollup in redux-devtools-rtk-query-monitor

* Use rollup for redux-devtools-serialize

* Fix redux-devtools examples

* Use rollup for redux-devtools-slider-monitor

* Fix slider examples

* Use rollup for redux-devtools-ui

* Use rollup for redux-devtools-utils

* Use rollup for redux-devtools-extension

* Use rollup for redux-devtools-app

* Fix Webpack app build

* Fix extension build

* Turn on minimization

* Update CLI
2022-01-10 15:41:53 +00:00
..
src Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
test Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.babelrc Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintignore Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
.eslintrc.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
CHANGELOG.md chore(*): run prettier 2021-03-06 10:17:55 -05:00
jest.config.js feature(react-devtools-instrument): convert to TypeScript (#604) 2020-08-22 10:28:08 -04:00
LICENSE.md Merge redux-devtools-instrument to packages 2018-12-02 23:49:12 +02:00
package.json Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
README.md chore(*): make more packages scoped (#692) 2020-12-21 15:46:28 -05:00
rollup.config.js Add ESM builds (#997) 2022-01-10 15:41:53 +00:00
tsconfig.json feature(react-devtools-instrument): convert to TypeScript (#604) 2020-08-22 10:28:08 -04:00

Redux DevTools Instrumentation

Redux enhancer used along with Redux DevTools or Remote Redux DevTools.

Installation

yarn add @redux-devtools/instrument

Usage

Add the store enhancer:

store/configureStore.js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import devTools from 'remote-redux-devtools';
import reducer from '../reducers';

// Usually you import the reducer from the monitor
// or apply with createDevTools as explained in Redux DevTools
const monitorReducer = (state = {}, action) => state;

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(...middlewares),
    // other enhancers and applyMiddleware should be added before the instrumentation
    instrument(monitorReducer, { maxAge: 50 })
  );

  // Note: passing enhancer as last argument requires redux@>=3.1.0
  return createStore(reducer, initialState, enhancer);
}

API

instrument(monitorReducer, [options])

  • arguments
    • monitorReducer function called whenever an action is dispatched (see the example of a monitor reducer).
    • options object
      • maxAge number or function(currentLiftedAction, previousLiftedState) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once maxAge is reached. Can be generated dynamically with a function getting current action as argument.
      • shouldCatchErrors boolean - if specified as true, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
      • shouldRecordChanges boolean - if specified as false, it will not record the changes till pauseRecording(false) is dispatched. Default is true.
      • pauseActionType string - if specified, whenever pauseRecording(false) lifted action is dispatched and there are actions in the history log, will add this action type. If not specified, will commit when paused.
      • shouldStartLocked boolean - if specified as true, it will not allow any non-monitor actions to be dispatched till lockChanges(false) is dispatched. Default is false.
      • shouldHotReload boolean - if set to false, will not recompute the states on hot reloading (or on replacing the reducers). Default to true.
      • trace boolean or function - if set to true, will include stack trace for every dispatched action. You can use a function (with action object as argument) which should return new Error().stack string, getting the stack outside of reducers. Default to false.
      • traceLimit number - maximum stack trace frames to be stored (in case trace option was provided as true). By default it's 10. If trace option is a function, traceLimit will have no effect, that should be handled there like so: trace: () => new Error().stack.split('\n').slice(0, limit+1).join('\n') (+1 is needed for Chrome where's an extra 1st frame for Error\n).

License

MIT