reduxjs/redux-devtools
1
1
Fork 0
mirror of https://github.com/reduxjs/redux-devtools.git synced 2025-10-31 07:57:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from gaearon/gaearon-patch-1

Browse Source 
0.1.0 README
This commit is contained in:
Dan Abramov 2015-07-15 00:45:16 +03:00
commit a831af7317
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
README.md
View File

@ -1,11 +1,17 @@
Redux DevTools Redux DevTools
========================= =========================
Haha. README coming. Also not on NPM yet. A better README is coming. But if you insist...
### Installation
It's out on NPM as `react-devtools@0.1.0`.
[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.)
### Running Examples ### Running Examples
In the meantime, you can do this: You can do this:
``` ```
git clone https://github.com/gaearon/redux-devtools.git git clone https://github.com/gaearon/redux-devtools.git
@ -21,10 +27,21 @@ open http://localhost:3000
Try clicking on actions in the log, or changing some code inside `examples/counter/reducers/counter`. 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. For fun, you can also open `http://localhost:3000/?debug_session=123`, click around, and then refresh.
Oh, and you can do this with the TodoMVC example as well. Oh, and you can do the same with the TodoMVC example as well.
### It's Ugly! ### It's Ugly!
The design or usability is not the point. (Although we'll have better design in the future :-) 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. You can build any UI you want for it. The included `LogMonitor` is just an example. **You can build a completely custom UI for it because `<DevTools>` accepts a `monitor` React component prop.** The included `LogMonitor` is just an example.
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