Skip to content

Inspecting / time travelling state changes of React component on Redux DevTools Extension or React Native Debugger

License

Notifications You must be signed in to change notification settings

jhen0409/remotedev-react-state

Repository files navigation

remotedev-react-state Build Status NPM version Greenkeeper badge

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.

Usage

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.

connectToDevTools(instance, options)

  • 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.

connectToDevTools.ref(options)

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.

TODO

  • Remove devtools instance when component unmount

License

MIT

About

Inspecting / time travelling state changes of React component on Redux DevTools Extension or React Native Debugger

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published