mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2025-07-27 00:19:55 +03:00
log-monitor
This commit is contained in:
parent
16d6e95136
commit
e1a9148b67
|
@ -38,6 +38,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@redux-devtools/core": "^3.7.0",
|
"@redux-devtools/core": "^3.7.0",
|
||||||
|
"@redux-devtools/log-monitor": "^2.1.0",
|
||||||
"d3-state-visualizer": "^1.3.4",
|
"d3-state-visualizer": "^1.3.4",
|
||||||
"devui": "^1.0.0-6",
|
"devui": "^1.0.0-6",
|
||||||
"get-params": "^0.1.2",
|
"get-params": "^0.1.2",
|
||||||
|
@ -57,7 +58,6 @@
|
||||||
"redux-devtools-inspector-monitor": "^0.14.0",
|
"redux-devtools-inspector-monitor": "^0.14.0",
|
||||||
"redux-devtools-inspector-monitor-test-tab": "^0.6.2",
|
"redux-devtools-inspector-monitor-test-tab": "^0.6.2",
|
||||||
"redux-devtools-inspector-monitor-trace-tab": "^0.1.3",
|
"redux-devtools-inspector-monitor-trace-tab": "^0.1.3",
|
||||||
"redux-devtools-log-monitor": "^2.1.0",
|
|
||||||
"redux-devtools-serialize": "^0.2.0",
|
"redux-devtools-serialize": "^0.2.0",
|
||||||
"redux-devtools-slider-monitor": "^2.0.0-5",
|
"redux-devtools-slider-monitor": "^2.0.0-5",
|
||||||
"redux-persist": "^4.10.2",
|
"redux-persist": "^4.10.2",
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from '@redux-devtools/log-monitor';
|
||||||
import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
|
import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper';
|
||||||
import InspectorWrapper from '../containers/monitors/InspectorWrapper';
|
import InspectorWrapper from '../containers/monitors/InspectorWrapper';
|
||||||
|
|
||||||
|
|
|
@ -21,7 +21,7 @@ For example, you can use it together with [`LogMonitor`](https://github.com/redu
|
||||||
```js
|
```js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from '@redux-devtools/core';
|
import { createDevTools } from '@redux-devtools/core';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from '@redux-devtools/log-monitor';
|
||||||
import SliderMonitor from 'redux-devtools-slider-monitor';
|
import SliderMonitor from 'redux-devtools-slider-monitor';
|
||||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||||
|
|
||||||
|
|
|
@ -102,7 +102,7 @@ class DockMonitor<S, A extends Action<unknown>> extends Component<
|
||||||
console.error(
|
console.error(
|
||||||
'<DockMonitor> requires at least one monitor inside. ' +
|
'<DockMonitor> requires at least one monitor inside. ' +
|
||||||
'Why don’t you try <LogMonitor>? You can get it at ' +
|
'Why don’t you try <LogMonitor>? You can get it at ' +
|
||||||
'https://github.com/gaearon/redux-devtools-log-monitor.'
|
'https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor.'
|
||||||
);
|
);
|
||||||
} else if (childrenCount > 1 && !props.changeMonitorKey) {
|
} else if (childrenCount > 1 && !props.changeMonitorKey) {
|
||||||
// eslint-disable-next-line no-console
|
// eslint-disable-next-line no-console
|
||||||
|
|
|
@ -41,7 +41,7 @@ export default function configureStore(initialState) {
|
||||||
`instrument(monitorReducer, [options])`
|
`instrument(monitorReducer, [options])`
|
||||||
|
|
||||||
- arguments
|
- arguments
|
||||||
- **monitorReducer** _function_ called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/gaearon/redux-devtools-log-monitor/blob/master/src/reducers.js#L13)).
|
- **monitorReducer** _function_ called whenever an action is dispatched ([see the example of a monitor reducer](https://github.com/reduxjs/redux-devtools/blob/master/packages/redux-devtools-log-monitor/src/reducers.ts#L34)).
|
||||||
- **options** _object_
|
- **options** _object_
|
||||||
- **maxAge** _number_ or _function_(currentLiftedAction, previousLiftedState) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once `maxAge` is reached. Can be generated dynamically with a function getting current action as argument.
|
- **maxAge** _number_ or _function_(currentLiftedAction, previousLiftedState) - maximum allowed actions to be stored on the history tree, the oldest actions are removed once `maxAge` is reached. Can be generated dynamically with a function getting current action as argument.
|
||||||
- **shouldCatchErrors** _boolean_ - if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
|
- **shouldCatchErrors** _boolean_ - if specified as `true`, whenever there's an exception in reducers, the monitors will show the error message, and next actions will not be dispatched.
|
||||||
|
|
|
@ -8,7 +8,7 @@ It shows a log of states and actions, and lets you change their history. Created
|
||||||
### Installation
|
### Installation
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install --save-dev redux-devtools-log-monitor
|
yarn add @redux-devtools/log-monitor
|
||||||
```
|
```
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
@ -20,7 +20,7 @@ You can use `LogMonitor` as the only monitor in your app:
|
||||||
```js
|
```js
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from '@redux-devtools/core';
|
import { createDevTools } from '@redux-devtools/core';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from '@redux-devtools/log-monitor';
|
||||||
|
|
||||||
export default createDevTools(<LogMonitor />);
|
export default createDevTools(<LogMonitor />);
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "redux-devtools-log-monitor",
|
"name": "@redux-devtools/log-monitor",
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"description": "The default tree view monitor for Redux DevTools",
|
"description": "The default tree view monitor for Redux DevTools",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
|
|
@ -17,13 +17,13 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@redux-devtools/core": "^3.7.0",
|
"@redux-devtools/core": "^3.7.0",
|
||||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||||
|
"@redux-devtools/log-monitor": "^2.1.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-hot-loader": "^4.12.21",
|
"react-hot-loader": "^4.12.21",
|
||||||
"react-redux": "^7.2.1",
|
"react-redux": "^7.2.1",
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
"redux-devtools-log-monitor": "^2.1.0",
|
|
||||||
"redux-devtools-slider-monitor": "^2.0.0-5",
|
"redux-devtools-slider-monitor": "^2.0.0-5",
|
||||||
"todomvc-app-css": "^2.3.0"
|
"todomvc-app-css": "^2.3.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -31,9 +31,9 @@ A live-editing time travel environment for [Redux](https://github.com/reactjs/re
|
||||||
|
|
||||||
### Overview
|
### 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/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
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/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) for inspecting the state and time travel, and wrap it in a [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.
|
||||||
|
|
||||||
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).
|
If you came here looking for what do the “Reset”, “Revert”, “Sweep” or “Commit” buttons do, check out [the `LogMonitor` documentation](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor#features).
|
||||||
|
|
||||||
### Browser Extension
|
### Browser Extension
|
||||||
|
|
||||||
|
@ -78,7 +78,7 @@ Also try opening `http://localhost:3000/?debug_session=123`, click around, and t
|
||||||
|
|
||||||
### Custom Monitors
|
### Custom Monitors
|
||||||
|
|
||||||
**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/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) are just examples of what is possible.
|
**DevTools accepts monitor components so you can build a completely custom UI.** [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) and [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor) are just examples of what is possible.
|
||||||
|
|
||||||
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**
|
**[I challenge you to build a custom monitor for Redux DevTools!](https://github.com/reduxjs/redux-devtools/issues/3)**
|
||||||
|
|
||||||
|
@ -87,7 +87,7 @@ Some crazy ideas for custom monitors:
|
||||||
- A slider that lets you jump between computed states just by dragging it
|
- 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)
|
- 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
|
- 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`](https://github.com/gaearon/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
- Feel free to come up with and implement your own! Check [`LogMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-log-monitor) `propTypes` to see what you can do.
|
||||||
|
|
||||||
In fact some of these are implemented already:
|
In fact some of these are implemented already:
|
||||||
|
|
||||||
|
|
|
@ -21,13 +21,13 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@redux-devtools/core": "^3.7.0",
|
"@redux-devtools/core": "^3.7.0",
|
||||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||||
|
"@redux-devtools/log-monitor": "^2.1.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
"react-hot-loader": "^4.12.21",
|
"react-hot-loader": "^4.12.21",
|
||||||
"react-redux": "^7.2.1",
|
"react-redux": "^7.2.1",
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
"redux-devtools-log-monitor": "^2.1.0",
|
|
||||||
"redux-thunk": "^2.3.0"
|
"redux-thunk": "^2.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from '@redux-devtools/core';
|
import { createDevTools } from '@redux-devtools/core';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from '@redux-devtools/log-monitor';
|
||||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||||
|
|
||||||
export default createDevTools(
|
export default createDevTools(
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { createDevTools } from '@redux-devtools/core';
|
import { createDevTools } from '@redux-devtools/core';
|
||||||
import LogMonitor from 'redux-devtools-log-monitor';
|
import LogMonitor from '@redux-devtools/log-monitor';
|
||||||
import DockMonitor from '@redux-devtools/dock-monitor';
|
import DockMonitor from '@redux-devtools/dock-monitor';
|
||||||
|
|
||||||
export default createDevTools(
|
export default createDevTools(
|
||||||
|
|
|
@ -33,6 +33,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@redux-devtools/core": "^3.7.0",
|
"@redux-devtools/core": "^3.7.0",
|
||||||
"@redux-devtools/dock-monitor": "^1.2.0",
|
"@redux-devtools/dock-monitor": "^1.2.0",
|
||||||
|
"@redux-devtools/log-monitor": "^2.1.0",
|
||||||
"classnames": "^2.2.6",
|
"classnames": "^2.2.6",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
|
@ -40,7 +41,6 @@
|
||||||
"react-hot-loader": "^4.12.21",
|
"react-hot-loader": "^4.12.21",
|
||||||
"react-redux": "^7.2.1",
|
"react-redux": "^7.2.1",
|
||||||
"redux": "^4.0.5",
|
"redux": "^4.0.5",
|
||||||
"redux-devtools-log-monitor": "^2.1.0",
|
|
||||||
"todomvc-app-css": "^2.3.0"
|
"todomvc-app-css": "^2.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user