Redux DevTools

Logging reports is already something, but it would be more useful if we could get a tool like DevTools to interact with the state. Third-party package redux-devtools brings in an extensible environment, which supports state live-editing and time traveling. We will examine it in conjunction with two additional modules, redux-devtools-log-monitor and redux-devtools-dock-monitor. The first allows us to inspect the state and time travel. The second is a wrapper that docks the Redux DevTools UI to window edges when we press the corresponding hot-key. To see it in action, we create a new component out of custom describing DevTools:

./js/Components/DevTools.jsx

import React from "react"; 
import { createDevTools } from "redux-devtools"; 
import LogMonitor from "redux-devtools-log-monitor"; 
import DockMonitor from "redux-devtools-dock-monitor"; 


const DevTools = createDevTools( 
  <DockMonitor toggleVisibilityKey="ctrl-h" 
               changePositionKey="ctrl-q" 
          ...