redux-devtools/extension/docs/API/Methods.md

Communicate with the extension directly

Note this is advanced API, which you usually don't need to use with Redux enhancer.

Use the following methods of window.__REDUX_DEVTOOLS_EXTENSION__:

• connect
• disconnect
• send
• listen
• open
• notifyErrors

connect([options])

Arguments

• [options] Object - see the available options.

Returns

Object containing the following methods:

• subscribe(listener) - adds a change listener. It will be called any time an action is dispatched from the monitor. Returns a function to unsubscribe the current listener.
• unsubscribe() - unsubscribes all listeners.
• send(action, state) - sends a new action and state manually to be shown on the monitor. If action is null then we suppose we send liftedState.
• init(state) - sends the initial state to the monitor.
• error(message) - sends the error message to be shown in the extension's monitor.

Example of usage:

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect(config);
devTools.subscribe((message) => {
  if (message.type === 'DISPATCH' && message.state) {
    console.log('DevTools requested to change the state to', message.state);
  }
});
devTools.init({ value: 'initial state' });
devTools.send('change state', { value: 'state changed' });

See redux enhancer's example, react example and blog post for more details.

disconnect()

Remove extensions listener and disconnect extensions background script connection. Usually just unsubscribing the listener inside the connect is enough.

send(action, state, [options, instanceId])

Send a new action and state manually to be shown on the monitor. It's recommended to use connect, unless you want to hook into an already created instance.

Arguments

• action String (action type) or Object with required type key.
• state any - usually object to expand.
• [options] Object - see the available options.
• [instanceId] String - instance id for which to include the log. If not specified and not present in the options object, will be the first available instance.

listen(onMessage, instanceId)

Listen for messages dispatched for specific instanceId. For most cases it's better to use subcribe inside the connect.

Arguments

• onMessage Function to call when there's an action from the monitor.
• instanceId String - instance id for which to handle actions.

open([position])

Open the extension's window. This should be conditional (usually you don't need to open extension's window automatically).

Arguments

• [position] String - window position: left, right, bottom. Also can be panel to open it in a Chrome panel. Or remote to open remote monitor. By default is left.

notifyErrors([onError])

When called, the extension will listen for uncaught exceptions on the page, and, if any, will show native notifications. Optionally, you can provide a function to be called when an exception occurs.

Arguments

• [onError] Function to call when there's an exceptions.