redux-devtools/README.md

130 lines
6.2 KiB
Markdown
Raw Normal View History

2015-07-14 22:46:44 +03:00
Redux DevTools
=========================
A live-editing time travel environment for [Redux](https://github.com/rackt/redux).
**[See Dan's React Europe talk demoing it!](http://youtube.com/watch?v=xsSnOQynTHs)**
2016-02-06 02:49:45 +03:00
### Table of Contents
- [Features](#features)
- [Overview](#overview)
- [Browser Extension](#browser-extension)
2016-02-06 02:49:45 +03:00
- [Setup Instructions](#setup-instructions)
- [Custom Monitors](#custom-monitors)
- [License](#license)
2015-07-15 00:45:02 +03:00
2015-09-24 17:58:42 +03:00
[![build status](https://img.shields.io/travis/gaearon/redux-devtools/master.svg?style=flat-square)](https://travis-ci.org/gaearon/redux-devtools)
[![npm version](https://img.shields.io/npm/v/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools)
[![npm downloads](https://img.shields.io/npm/dm/redux-devtools.svg?style=flat-square)](https://www.npmjs.com/package/redux-devtools)
2015-12-13 02:33:35 +03:00
[![redux channel on discord](https://img.shields.io/badge/discord-redux@reactiflux-738bd7.svg?style=flat-square)](https://discord.gg/0ZcbPKXt5bWb10Ma)
2015-09-24 17:58:42 +03:00
2015-08-12 16:30:49 +03:00
![](http://i.imgur.com/J4GeW0M.gif)
2015-08-12 14:49:31 +03:00
### Features
* Lets you inspect every state and action payload
* Lets you go back in time by “cancelling” actions
2015-12-13 02:33:35 +03:00
* If you change the reducer code, each “staged” action will be re-evaluated
2015-08-12 14:49:31 +03:00
* If the reducers throw, you will see during which action this happened, and what the error was
* With `persistState()` store enhancer, you can persist debug sessions across page reloads
2015-07-15 01:05:08 +03:00
2015-12-14 07:03:54 +03:00
### Overview
Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see [walkthrough](./docs/Walkthrough.md) for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when youre comfortable rolling up your own setup, feel free to do this, and share it with us.
2015-12-14 07:03:54 +03:00
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/README.md#features).
### Browser Extension
2016-01-29 23:22:03 +03:00
If you dont want to bother with installing Redux DevTools and integrating it into your project, consider using [Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension) for Chrome and Firefox. It provides access to the most popular monitors, is easy to configure to filter actions, and doesnt require installing any packages.
2016-01-29 23:22:03 +03:00
### Setup Instructions
2015-07-15 00:45:02 +03:00
Read the installation [walkthrough](./docs/Walkthrough.md) for integration instructions and usage examples (`<DevTools>` component, `DevTools.instrument()`, exclude from production builds, gotchas).
2015-07-15 00:32:47 +03:00
### Running Examples
2015-12-14 07:18:29 +03:00
Clone the project:
2015-07-15 00:15:04 +03:00
```
git clone https://github.com/gaearon/redux-devtools.git
cd redux-devtools
2015-12-14 07:18:29 +03:00
```
Run `npm install` in the root folder:
```
2015-07-15 00:15:04 +03:00
npm install
2015-12-14 07:18:29 +03:00
```
Now you can open an example folder and run `npm install` there:
2015-07-15 00:15:04 +03:00
2015-12-14 07:18:29 +03:00
```
2015-12-14 07:03:54 +03:00
cd examples/counter # or examples/todomvc
2015-07-15 00:15:04 +03:00
npm install
2015-12-14 07:18:29 +03:00
```
Finally, run the development server and open the page:
```
2015-07-15 00:15:04 +03:00
npm start
open http://localhost:3000
```
2015-12-14 07:18:29 +03:00
Try clicking on actions in the log, or changing some code inside the reducers. You should see the action log re-evaluate the state on every code change.
2015-07-15 00:26:06 +03:00
2015-12-14 07:18:29 +03:00
Also try opening `http://localhost:3000/?debug_session=123`, click around, and then refresh. You should see that all actions have been restored from the local storage.
2015-07-15 00:26:06 +03:00
2015-08-12 14:49:31 +03:00
### Custom Monitors
2015-07-15 00:32:47 +03:00
2015-12-14 07:06:58 +03:00
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) are just examples of what is possible.
2015-07-15 00:59:35 +03:00
2015-08-12 14:49:31 +03:00
**[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
2015-12-14 07:06:58 +03:00
* Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/gaearon/redux-devtools-log-monitor) `propTypes` to see what you can do.
2015-07-15 00:45:02 +03:00
2015-08-12 14:49:31 +03:00
In fact some of these are implemented already:
2016-01-29 23:41:39 +03:00
#### [Slider Monitor](https://github.com/calesce/redux-slider-monitor)
2015-08-12 14:49:31 +03:00
2016-01-29 23:44:26 +03:00
![](https://camo.githubusercontent.com/47a3f427c9d2e0c763b74e33417b3001fe8604b6/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f662e636c2e6c792f6974656d732f3149335032323243334e3252314d3279314b33622f53637265656e2532305265636f7264696e67253230323031352d31322d3232253230617425323030372e3230253230504d2e6769663f763d3162363236376537)
2015-08-12 14:49:31 +03:00
2016-02-23 19:49:31 +03:00
#### [Inspector](https://github.com/alexkuz/redux-devtools-inspector)
![](http://i.imgur.com/fYh8fk5.gif)
2016-01-29 23:41:39 +03:00
#### [Diff Monitor](https://github.com/whetstone/redux-devtools-diff-monitor)
2016-01-29 23:22:03 +03:00
![](https://camo.githubusercontent.com/c2c0ba1ad82d003b5386404ae09c00763d73510c/687474703a2f2f692e696d6775722e636f6d2f72764352394f512e706e67)
2016-01-29 23:41:39 +03:00
#### [Filterable Log Monitor](https://github.com/bvaughn/redux-devtools-filterable-log-monitor/)
2016-01-29 23:44:26 +03:00
![redux-devtools-filterable-log-monitor](https://cloud.githubusercontent.com/assets/29597/12440009/182bb31c-beec-11e5-8fd0-bdda48e646b2.gif)
2016-01-29 23:22:03 +03:00
2016-01-29 23:41:39 +03:00
#### [Chart Monitor](https://github.com/romseguy/redux-devtools-chart-monitor)
2016-01-29 23:32:51 +03:00
![redux-devtools-chart-monitor](http://i.imgur.com/MSgvU6l.gif)
2016-01-29 23:41:39 +03:00
#### [Filter Actions](https://github.com/zalmoxisus/redux-devtools-filter-actions)
2016-01-29 23:22:03 +03:00
(Does not have a UI but can wrap any other monitor)
<img src='http://i.imgur.com/TlqnU0J.png' width='400'>
#### [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)
![redux-devtools-dispatch](https://cloud.githubusercontent.com/assets/969003/12874321/2c3624ec-cdd2-11e5-9856-fd7e24efb8d5.gif)
2015-08-12 14:49:31 +03:00
#### Keep them coming!
Create a PR to add your custom monitor.
2015-07-15 00:59:35 +03:00
2015-07-15 00:45:02 +03:00
### License
MIT