A custom monitor for use with Redux DevTools.
It uses a slider based on react-slider to slide between different recorded actions. It also features play/pause/step-through, which is inspired by some very cool Elm examples.
Installation
npm install redux-slider-monitor
Usage
In your root component:
import { DevTools, DebugPanel } from 'redux-devtools';
import SliderMonitor from 'redux-slider-monitor';
<DebugPanel left right bottom>
<DevTools store={store}
keyboardEnabled // if you want keyboard shortcuts
monitor={SliderMonitor}
/>
</DebugPanel>Dispatch some Redux actions. Use the slider to navigate between the state changes.
Click the play/pause buttons to watch the state changes over time, or step backward or forward in state time with the left/right arrow buttons. Change replay speeds with the 1x button, and "Live" will replay actions with the same time intervals in which they originally were dispatched.
Keyboard shortcuts
ctrl+h: toggle hiding the monitor
ctrl+j: play/pause
ctrl+[: step backward
ctrl+]: step forward
Running Examples
You can do this:
git clone https://github.com/calesce/redux-slider-monitor.git
cd redux-slider-monitor
npm install
cd examples/counter
npm install
npm start
open http://localhost:3000
License
MIT