Skip to content
A custom monitor for Redux DevTools to replay recorded Redux actions
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/todomvc Support React 16, closes #33 Dec 22, 2018
src Pause replay when click reset Jun 12, 2017
.babelrc Update dependencies (#30) Apr 21, 2017
.eslintignore Support React 16, closes #33 Dec 22, 2018
.eslintrc Update dependencies (#30) Apr 21, 2017
.gitignore Add deploy script for gh-pages Apr 21, 2017
.npmignore Update dependencies (#30) Apr 21, 2017
CODE_OF_CONDUCT.md
LICENSE.md Update LICENSE.md Aug 31, 2016
README.md Add a notice that it's moved and maintained in redux-devtools monorepo Dec 22, 2018
package.json v2.0.0-2 Dec 22, 2018
yarn.lock Support React 16, closes #33 Dec 22, 2018

README.md

Redux Slider Monitor

npm version

This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and pull requests.

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.

Try out the demo!

Installation

npm install redux-slider-monitor

Recommended Usage

Use with DockMonitor

<DockMonitor toggleVisibilityKey='ctrl-h'
             changePositionKey='ctrl-q'
             defaultPosition='bottom'
             defaultSize={0.15}>
  <SliderMonitor keyboardEnabled />
</DockMonitor>

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

Pass the keyboardEnabled prop to use these shortcuts

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/todomvc
npm install
npm start
open http://localhost:3000

License

MIT

You can’t perform that action at this time.