Inspecting / time travelling state changes of React component on Redux DevTools Extension or React Native Debugger, inspired by the article - Redux DevTools without Redux, make it as simple util.

import React from 'react' import connectToDevTools from 'remotedev-react-state' class App extends React.Component { state = { count: 0 } componentWillMount() { // Connect to devtools after setup initial state connectToDevTools(this/*, options */) } ... }

See the example.

• instance - A react instance, you could get this in component lifecycle or by ref.
• options - Exposed options used for connect API of redux-devtools-extension. We have specific options:
  • name: String - Name of devtools instance, Component - {display name} by default.
  • actionName: String | Function - The action name will be displayed on devtools, you could use function(state) for return action name. State change by default.

Create connectToDevTools function can be used for component ref prop.

Example:

<App ref={connectToDevTools.ref(/* options */)} />

If you haven't redux-devtools-extension on your environment (Any react renderer that not on Chrome/Firefox/Electron/React Native Debugger), it will use the remote API of remotedev.

• Remove devtools instance when component unmount

MIT