DevTools for Redux with hot reloading, action replay, and customizable UI
Go to file
Patrick Burtchaell 64dcb3cc17 Add monitorState
2015-07-19 10:21:10 -05:00
examples Add monitor to TodoMVC 2015-07-15 00:25:02 +03:00
src Add monitorState 2015-07-19 10:21:10 -05:00
test Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
.babelrc Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
.eslintignore Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
.eslintrc Import the initial devTools implementation 2015-07-15 00:09:54 +03:00
.gitignore We don't need an UMD build here 2015-07-15 00:09:20 +03:00
.npmignore Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
.travis.yml Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
CHANGELOG.md Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
CODE_OF_CONDUCT.md Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
LICENSE.md Add project skeleton (no DevTools yet) 2015-07-14 22:46:44 +03:00
package.json 0.1.1 2015-07-15 01:51:10 +03:00
README.md Merge pull request #4 from kevinrenskers/patch-1 2015-07-15 01:05:28 +03:00

Redux DevTools

A better README is coming. But if you insist...

Installation

It's out on NPM as redux-devtools@0.1.0.

This commit should give you an idea about how to add Redux DevTools for your app but make sure to only apply devTools() in development! In production, this will be terribly slow because actions just accumulate forever. (We'll need to implement a rolling window for dev too.)

Running Examples

You can do this:

git clone https://github.com/gaearon/redux-devtools.git
cd redux-devtools
npm install

cd examples/counter
npm install
npm start
open http://localhost:3000

Try clicking on actions in the log, or changing some code inside examples/counter/reducers/counter.
For fun, you can also open http://localhost:3000/?debug_session=123, click around, and then refresh.

Oh, and you can do the same with the TodoMVC example as well.

It's Ugly!

The design or usability is not the point. (Although we'll have better design in the future :-)

You can build a completely custom UI for it because <DevTools> accepts a monitor React component prop. The included LogMonitor is just an example.

In fact I challenge you to build a custom monitor for Redux DevTools!

Some crazy ideas for custom monitors:

  • A slider that lets you jump between computed states just by dragging it
  • An in-app layer that shows the last N states right in the app (e.g. for animation)
  • A time machine like interface where the last N states of your app reside on different Z layers
  • Feel free to come up with and implement your own! Check LogMonitor propTypes to see what you can do.

License

MIT