redux-devtools/README.md

59 lines
2.6 KiB
Markdown
Raw Normal View History

2015-07-14 22:46:44 +03:00
Redux DevTools
=========================
2015-07-15 00:45:02 +03:00
A better README is coming. But if you insist...
2015-07-15 01:05:08 +03:00
<img src='http://i.imgur.com/HMW2pjP.png' width='700'>
2015-07-15 00:45:02 +03:00
### Installation
2015-07-15 01:00:12 +03:00
It's out on NPM as `redux-devtools@0.1.0`.
2015-07-15 00:45:02 +03:00
[This commit](https://github.com/gaearon/redux-devtools/commit/0a2a97556e252bfad822ca438923774bc8b932a4) 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.)
2015-07-15 00:15:04 +03:00
For example, in Webpack, you can use `ProvidePlugin` to turn magic constants like `__DEV__` into `true` or `false` depending on the environment, and import and render `redux-devtools` conditionally behind `if (__DEV__)`. Then, if you have an Uglify step before production, Uglify will eliminate dead `if (false)` branches with `redux-devtools` imports. Here is [an example](https://github.com/erikras/react-redux-universal-hot-example/compare/66bf63fb0f23a3c264a5d37c3acb4c047bf0c0c9...c6515236a1def8a3d2bfeb8f6cd6f0ccdb2f9e1b) of adding React DevTools to a project handling the production case correctly.
2015-07-15 00:32:47 +03:00
### Running Examples
2015-07-15 00:45:02 +03:00
You can do this:
2015-07-15 00:15:04 +03:00
```
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
```
2015-07-15 00:20:04 +03:00
Try clicking on actions in the log, or changing some code inside `examples/counter/reducers/counter`.
2015-07-15 00:15:04 +03:00
For fun, you can also open `http://localhost:3000/?debug_session=123`, click around, and then refresh.
2015-07-15 00:26:06 +03:00
2015-07-28 20:55:49 +03:00
Oh, and you can do the same with the TodoMVC example as well.
If you only would like to monitor a part of the state, you can set a select-prop on the DevTools component.
2015-07-28 20:55:49 +03:00
ex. `<DevTools select={state => state.todos} store={store} monitor={LogMonitor} />`
2015-07-15 00:32:47 +03:00
### It's Ugly!
The design or usability is not the point. (Although we'll have better design in the future :-)
2015-07-15 00:59:35 +03:00
**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!](https://github.com/gaearon/redux-devtools/issues/3)**
2015-07-15 00:45:02 +03:00
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.
2015-07-15 00:59:35 +03:00
2015-07-15 00:45:02 +03:00
### License
MIT