1 | # Redux DevTools Instrumentation
|
2 |
|
3 | Redux enhancer used along with [Redux DevTools](https://github.com/reduxjs/redux-devtools) or [Remote Redux DevTools](https://github.com/zalmoxisus/remote-redux-devtools).
|
4 |
|
5 | ### Installation
|
6 |
|
7 | ```
|
8 | npm install --save-dev redux-devtools-instrument
|
9 | ```
|
10 |
|
11 | ### Usage
|
12 |
|
13 | Add the store enhancer:
|
14 |
|
15 | ##### `store/configureStore.js`
|
16 |
|
17 | ```js
|
18 | import { createStore, applyMiddleware, compose } from 'redux';
|
19 | import thunk from 'redux-thunk';
|
20 | import devTools from 'remote-redux-devtools';
|
21 | import reducer from '../reducers';
|
22 |
|
23 | // Usually you import the reducer from the monitor
|
24 | // or apply with createDevTools as explained in Redux DevTools
|
25 | const monitorReducer = (state = {}, action) => state;
|
26 |
|
27 | export default function configureStore(initialState) {
|
28 | const enhancer = compose(
|
29 | applyMiddleware(...middlewares),
|
30 | // other enhancers and applyMiddleware should be added before the instrumentation
|
31 | instrument(monitorReducer, { maxAge: 50 })
|
32 | );
|
33 |
|
34 | // Note: passing enhancer as last argument requires redux@>=3.1.0
|
35 | return createStore(reducer, initialState, enhancer);
|
36 | }
|
37 | ```
|
38 |
|
39 | ### API
|
40 |
|
41 | `instrument(monitorReducer, [options])`
|
42 |
|
43 | - arguments
|
44 | - **monitorReducer** _function_ called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/reducers.js#L13)).
|
45 | - **options** _object_
|
46 | - **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.
|
47 | - **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.
|
48 | - **shouldRecordChanges** _boolean_ - if specified as `false`, it will not record the changes till `pauseRecording(false)` is dispatched. Default is `true`.
|
49 | - **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.
|
50 | - **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`.
|
51 | - **shouldHotReload** _boolean_ - if set to `false`, will not recompute the states on hot reloading (or on replacing the reducers). Default to `true`.
|
52 | - **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`.
|
53 | - **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`).
|
54 |
|
55 | ### License
|
56 |
|
57 | MIT
|