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

importReactfrom'react';importReactDOMfrom'react-dom';importstorefrom'./store';importStateViewerfrom'react-state-trace';constApp=()=>(<div><StateViewerstore={store}/><div><p>REACT STATE TRACE IS IN THE HOUSE</p><button>Like</button></div></div>);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.

---