react-state-trace

• React devtool that lets you break your app state into its atomic particles and view each of them autonomously as they change.

Demo

Installation

npm install --save react-state-trace

Usage

• Press shift + s to show or hide the devtool `js import React from 'react'; import ReactDOM from 'react-dom'; import store from './store'; import StateViewer from 'react-state-trace';

const App = () => (

ReactDOM.render( <App />, document.getElementById('root') ); `

• StateViewer is a toggleable component through which you can navigate your app state and see all the moving parts as they change in real time.
• props. one of the following should be passed to the component to track the state:
  • state - explicitly pass the app state.
  • store - pass a store holding the app state. the store should have one of the following attributes:
    • getState - a function that returns the app state (as implemented im redux for example).
    • state - the application state attribute.
  • dev - defaults to true, pass false in order for the devtool not to render.