Skip to content

Commit 28d8fdb

Browse files
zalmoxisuszalmoxisus
committed
Update docs
1 parent 7a8bc12 commit 28d8fdb

File tree

10 files changed

+142
-135
lines changed

10 files changed

+142
-135
lines changed

‎README.md‎

Lines changed: 69 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,18 @@
2727

2828
If you have a basic [store](http://redux.js.org/docs/api/createStore.html) as described in the official [redux-docs](http://redux.js.org/index.html), simply replace:
2929
```javascript
30-
let store = createStore(reducer);
30+
const store = createStore(reducer);
3131
```
3232
with
3333
```javascript
34-
let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());
34+
const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
3535
```
3636

37-
Or with [initialState](http://redux.js.org/docs/api/createStore.html) but without middleware and enhancers arguments:
37+
Or with [preloadedState](http://redux.js.org/docs/api/createStore.html) but without middleware and enhancers arguments:
3838

3939
```javascript
40-
let store = createStore(reducer, initialState,
41-
window.devToolsExtension && window.devToolsExtension()
40+
const store = createStore(reducer, preloadedState,
41+
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
4242
);
4343
```
4444

@@ -51,45 +51,91 @@
5151
```javascript
5252
import { createStore, applyMiddleware, compose } from 'redux';
5353

54-
let store = createStore(reducer, initialState, compose(
54+
const store = createStore(reducer, preloadedState, compose(
5555
applyMiddleware(...middleware)
5656
));
5757
```
58-
to this:
58+
to:
5959
```javascript
60-
let store = createStore(reducer, initialState, compose(
61-
applyMiddleware(...middleware),
62-
window.devToolsExtension ? window.devToolsExtension() : f => f
60+
import { createStore, applyMiddleware, compose } from 'redux';
61+
62+
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
63+
const store = createStore(reducer, preloadedState, composeEnhancers(
64+
applyMiddleware(...middleware)
6365
));
6466
```
65-
66-
#### 1.3 Together with Redux DevTools
67-
You can use this extension together with vanilla [Redux DevTools](https://github.com/gaearon/redux-devtools) as a fallback, but not both simultaneously:
67+
When the extension is not installed, we’re using Redux compose here.
68+
69+
In case you don’t want to allow the extension in production, [envify the code](https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md#exclude-devtools-from-production-builds) and add `process.env.NODE_ENV !== 'production' && ` before `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__`.
70+
71+
To specify [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig) use it like that:
6872
```js
69-
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument()
73+
const composeEnhancers =
74+
process.env.NODE_ENV !== 'production' &&
75+
typeof window === 'object' &&
76+
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
77+
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
78+
name: 'MyApp', actionsBlacklist: ['REDUX_STORAGE_SAVE']
79+
}) : compose;
80+
81+
const enhancer = composeEnhancers(
82+
applyMiddleware(...middleware),
83+
// other store enhancers if any
84+
);
85+
const store = createStore(reducer, enhancer);
7086
```
7187

72-
[Make sure not to render DevTools when using the extension](https://github.com/zalmoxisus/redux-devtools-extension/issues/57) or you'll probably want to render the monitor from vanilla DevTools as follows:
88+
[See the post for more details](https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83).
89+
90+
#### 1.3 Use `redux-devtools-extension` package from npm
91+
92+
To make things easier, there's a npm package to install:
93+
```
94+
npm install --save redux-devtools-extension
95+
```
96+
and to use like that:
7397
```js
74-
{ !window.devToolsExtension ? <DevTools /> : null }
98+
import { createStore, applyMiddleware } from 'redux';
99+
import { composeWithDevTools } from 'redux-devtools-extension';
100+
101+
const store = createStore(reducer, composeWithDevTools(
102+
applyMiddleware(...middleware),
103+
// other store enhancers if any
104+
));
75105
```
76-
77-
#### 1.4 Use with universal (isomorphic) apps
78-
```javascript
79-
typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f
80-
```
106+
or if needed to apply [extension’s options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig):
107+
```js
108+
import { createStore, applyMiddleware } from 'redux';
109+
import { composeWithDevTools } from 'redux-devtools-extension';
110+
111+
const composeEnhancers = composeWithDevTools({
112+
name: 'MyApp', actionsBlacklist: ['REDUX_STORAGE_SAVE']
113+
});
114+
const store = createStore(reducer, composeEnhancers(
115+
applyMiddleware(...middleware),
116+
// other store enhancers if any
117+
));
118+
```
119+
There’re just [few lines of code](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/npm-package/index.js). If you don’t want to allow the extension in production, just use ‘redux-devtools-extension/developmentOnly’ instead of ‘redux-devtools-extension’.
120+
81121
#### 1.5 For React Native, hybrid, desktop and server side Redux apps
82122
Include [`Remote Redux DevTools`](https://github.com/zalmoxisus/remote-redux-devtools)'s store enhancer, and from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.
83123

84-
### 2. For advanced usage see [our documentation](http://zalmoxisus.github.io/redux-devtools-extension/).
124+
### 2. Without Redux
125+
See [the post](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f) for more details on how to use the extension with any architecture.
126+
127+
## API Reference
128+
- [Parameters](docs/API/Arguments.md)
129+
- [Methods](docs/API/Methods.md)
130+
- [Create Redux store right in the extension](docs/API/Methods.md).
85131

86132
## Demo
87133
Open these urls to test the extension:
88134

89135
- [Counter](http://zalmoxisus.github.io/examples/counter/)
90136
- [TodoMVC](http://zalmoxisus.github.io/examples/todomvc/)
91-
- [Redux Form](http://erikras.github.io/redux-form/#/examples/simple)
92137
- [Redux Router](http://zalmoxisus.github.io/examples/router/)
138+
- [Redux Form](http://erikras.github.io/redux-form/#/examples/simple)
93139

94140
Also you may run them from `./examples` folder.
95141

‎docs/API/Arguments.md‎

Lines changed: 6 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
# API Reference
1+
# Parameters
22

3-
`window.devToolsExtension` function can be used in 2 ways:
4-
1. [Apply as a Redux store enhancer](#windowdevtoolsextensionconfig)
5-
2. [Create Redux store right in the extension](#windowdevtoolsextensionreducer-preloadedstate-config).
6-
7-
8-
### `window.devToolsExtension([config])`
3+
Use `window.__REDUX_DEVTOOLS_EXTENSION__([config])` or `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([config])()`
94
- [`config`] *(object)*: options
105
- **name** (*string*) - the instance name to be showed on the monitor page. Default value is `document.title`.
116
- **actionCreators** (*array* or *object*) - action creators to dispatch remotely. See [the example](https://github.com/zalmoxisus/redux-devtools-extension/commit/477e69d8649dfcdc9bf84dd45605dab7d9775c03).
@@ -20,7 +15,7 @@
2015
Example of usage:
2116

2217
```js
23-
const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension({
18+
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
2419
deserializeState: (state) => ({
2520
todos: {
2621
...state.todos,
@@ -35,7 +30,7 @@
3530
Example of usage:
3631

3732
```js
38-
const store = Redux.createStore(reducer, window.devToolsExtension && window.devToolsExtension({
33+
const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
3934
serializeState: (key, value) => (
4035
value && mori.isMap(value) ? mori.toJs(value) : value
4136
)
@@ -53,41 +48,8 @@
5348
action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
5449
{ ...action, data: '<<LONG_BLOB>>' } : action
5550
);
56-
const store = createStore(rootReducer, window.devToolsExtension && window.devToolsExtension({
51+
const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
5752
actionsFilter,
58-
statesFilter: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state)
53+
statesFilter: (state) => state.data ? { ...state, data: '<<LONG_BLOB>>' } : state
5954
}));
6055
```
61-
- **getMonitor** (*function*) - return monitor object with the following properties:
62-
- **active** (*boolean*) - is `true` if the application is monitored (the monitor is open).
63-
- **start** (*function*) - starts monitoring (relaying logs to the monitor).
64-
- **stop** (*function*) - stop monitoring (the monitor will not get new changes till you `start` it again with the function above).
65-
- **update** (*function*) - update state history. Usually you want to use it when stopped monitoring (with the function above) and want to update the logs explicitly (useful for apps which dispatch actions too frequently).
66-
- **isHotReloaded** (*function*) - return `true` if reducers just got hot reloaded (useful for dealing with side effects, which didn't get hot-reloaded).
67-
- **isMonitorAction** (*function*) - return `true` if the last action was dispatched by the monitor (was: 'TOGGLE_ACTION', 'SWEEP', 'SET_ACTIONS_ACTIVE', 'IMPORT_STATE').
68-
- **isTimeTraveling** (*function*) - return `true` if the state was set by moving back and forth (the last action was dispatched by the monitor was 'JUMP_TO_STATE'). Usually you want to use it to skip side effects.
69-
70-
Example of usage:
71-
72-
```js
73-
export let isMonitorAction;
74-
export default function configureStore(initialState) {
75-
return createStore(reducer, initialState,
76-
window.devToolsExtension && window.devToolsExtension({
77-
getMonitor: (monitor) => { isMonitorAction = monitor.isMonitorAction; }
78-
}) : f => f
79-
);
80-
}
81-
```
82-
Then import it, for example, like [here](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/counter/components/Counter.js).
83-
84-
### `window.devToolsExtension(reducer, [preloadedState, config])`
85-
> Note: This is not intended to replace Redux' `createStore`. Use this approach only when you want to inspect changes outside of Redux or when not using Redux inside your application.
86-
87-
1. `reducer` *(Function)*: A [reducing function](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#reducer) that returns the next [state tree](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#state), given the current state tree and an [action](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#action) to handle.
88-
89-
2. [`preloadedState`] *(any)*: The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced `reducer` with [`combineReducers`](https://github.com/reactjs/redux/tree/master/docs/api/combineReducers.md), this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your `reducer` can understand.
90-
91-
3. [`config`] *(Object)*: options. See [above](#windowdevtoolsextensionconfig) for details.
92-
93-
[Example of usage](https://github.com/zalmoxisus/redux-devtools-extension/commit/1810d2c1f0e8be1daf8f2d8f7bbeb4f8c528d90b).

‎docs/API/CreateStore.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
### `window.__REDUX_DEVTOOLS_EXTENSION__(reducer, [preloadedState, config])`
2+
> Note: This is not intended to replace Redux' `createStore`. Use this approach only when you want to inspect changes outside of Redux or when not using Redux inside your application.
3+
4+
1. `reducer` *(Function)*: A [reducing function](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#reducer) that returns the next [state tree](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#state), given the current state tree and an [action](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#action) to handle.
5+
6+
2. [`preloadedState`] *(any)*: The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced `reducer` with [`combineReducers`](https://github.com/reactjs/redux/tree/master/docs/api/combineReducers.md), this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your `reducer` can understand.
7+
8+
3. [`config`] *(Object)*: options. See [parameters](Arguments.md) for details.
9+
10+
[Example of usage](https://github.com/zalmoxisus/redux-devtools-extension/commit/1810d2c1f0e8be1daf8f2d8f7bbeb4f8c528d90b).
11+
12+
[See the post for more details](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f).

‎docs/API/Methods.md‎

Lines changed: 16 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,53 +2,31 @@
22

33
> Note that this API is still excremental and is subject to future changes.
44
5-
Use the following methods of `window.devToolsExtension`:
5+
Use the following methods of `window.__REDUX_DEVTOOLS_EXTENSION__`:
66

7-
- [open](#windowdevtoolsextensionopenposition)
8-
- [notifyErrors](#windowdevtoolsextensionnotifyerrorsonerror)
9-
- [send](#windowdevtoolsextensionlistenonmessage-instanceid)
10-
- [connect](#windowdevtoolsextensionconnectconfig)
11-
- [disconnect](#windowdevtoolsextensiondisconnect)
7+
- [open](#openposition)
8+
- [notifyErrors](#notifyerrorsonerror)
9+
- [send](#listenonmessage-instanceid)
10+
- [connect](#connectconfig)
11+
- [disconnect](#disconnect)
1212

13-
### window.devToolsExtension.open([position])
13+
### open([position])
1414

1515
Open monitor window.
1616

1717
##### Arguments
1818

1919
- [`position`] *String* - window position: `left`, `right`, `bottom`. Also can be `panel` to [open it in a Chrome panel](../FAQ.md#how-to-keep-devtools-window-focused-all-the-time-in-a-chrome-panel). Or `remote` to [open remote monitor](../FAQ.md#how-to-get-it-work-with-webworkers-react-native-hybrid-desktop-and-server-side-apps). By default is `left`.
2020

21-
### window.devToolsExtension.notifyErrors([onError])
21+
### notifyErrors([onError])
2222

2323
Show notifications for uncaught exceptions.
2424

2525
##### Arguments
2626

2727
- [`onError`] *Function* to call when there's an exceptions.
2828

29-
### window.devToolsExtension.updateStore(store, instanceId)
30-
31-
Specify a new `store` object to be used by the extension. For example, in case of Redux Saga we can use like this:
32-
33-
```js
34-
const sagaMiddleware = createSagaMiddleware();
35-
const store = createStore(
36-
reducer,
37-
compose(
38-
applyMiddleware(sagaMiddleware),
39-
window.devToolsExtension && window.devToolsExtension()
40-
)
41-
);
42-
sagaMiddleware.run(rootSaga);
43-
if (window.devToolsExtension) window.devToolsExtension.updateStore(store);
44-
```
45-
46-
##### Arguments
47-
48-
- `store` *Object* to update.
49-
- [`instanceId`] *String* - instance id for which to update the store (in case your specified it in the config).
50-
51-
### window.devToolsExtension.send(action, state, [shouldStringify, instanceId])
29+
### send(action, state, [shouldStringify, instanceId])
5230

5331
Send a new action and state manually to be shown on the monitor.
5432

@@ -59,7 +37,7 @@ Send a new action and state manually to be shown on the monitor.
5937
- [`shouldStringify`] *Boolean* - indicates whether to serialize `action` and `state`.
6038
- [`instanceId`] *String* - instance id for which to attach the log.
6139

62-
### window.devToolsExtension.listen(onMessage, instanceId)
40+
### listen(onMessage, instanceId)
6341

6442
Send a new action and state manually to be shown on the monitor.
6543

@@ -68,7 +46,7 @@ Send a new action and state manually to be shown on the monitor.
6846
- `onMessage` *Function* to call when there's an action form the monitor.
6947
- `instanceId` *String* - instance id for which to handle actions.
7048

71-
### window.devToolsExtension.connect([config])
49+
### connect([config])
7250

7351
##### Arguments
7452

@@ -78,7 +56,7 @@ Send a new action and state manually to be shown on the monitor.
7856
*Object* containing the following methods:
7957

8058
- `subscribe(listener)` - adds a change listener. It will be called any time an action is dispatched form the monitor.
81-
- `unsubscribe()` - unsubscribes the change listener. You can use [window.devToolsExtension.disconnect](#windowdevtoolsextensiondisconnect) to remove all listeners.
59+
- `unsubscribe()` - unsubscribes the change listener. You can use [window.__REDUX_DEVTOOLS_EXTENSION__.disconnect](#disconnect) to remove all listeners.
8260
- `send(action, state)` - sends a new action and state manually to be shown on the monitor. If action is `null` then we suppose we send `liftedState`.
8361
- `init(state)` - sends the initial state to the monitor.
8462
- `error(message)` - sends the error message to be shown in Dispatcher monitor.
@@ -89,7 +67,7 @@ Example of usage:
8967
let isStarted = false;
9068
let isLiftedAction = false;
9169

92-
const devTools = window.devToolsExtension.connect();
70+
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__.connect();
9371
devTools.subscribe((message) => {
9472
if (message.type === 'START') {
9573
isStarted = true;
@@ -114,6 +92,8 @@ store.subscribe(() => {
11492

11593
There's [a simpler example](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/examples/react-counter-messaging/components/Counter.js).
11694

117-
### window.devToolsExtension.disconnect()
95+
[See the post for more details](https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f).
96+
97+
### disconnect()
11898

11999
Remove extensions listener and disconnect extensions background script connection.

‎docs/API/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# API Reference
2+
3+
- [Parameters](Arguments.md)
4+
- [Methods](Methods.md)
5+
- [Create Redux store right in the extension](Methods.md)

‎docs/Credits.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
# Credits
22

33
- Built using [Crossbuilder](https://github.com/zalmoxisus/crossbuilder) boilerplate.
4-
- Includes [Dan Abramov](https://github.com/gaearon)'s [redux-devtools](https://github.com/gaearon/redux-devtools).
5-
- Inspired from [Taylor Hakes](https://github.com/taylorhakes)' [work](https://github.com/taylorhakes/redux-devtools/tree/chrome-devtools).
4+
- Includes [Dan Abramov](https://github.com/gaearon)'s [redux-devtools](https://github.com/gaearon/redux-devtools) and the following monitors:
5+
- [Log Monitor](https://github.com/gaearon/redux-devtools-log-monitor)
6+
- [Inspector](https://github.com/alexkuz/redux-devtools-inspector)
7+
- [Dispatch](https://github.com/YoruNoHikage/redux-devtools-dispatch)
8+
- [Slider](https://github.com/calesce/redux-slider-monitor)
9+
- [Chart](https://github.com/romseguy/redux-devtools-chart-monitor)
610
- [The logo icon](https://github.com/reactjs/redux/issues/151) made by [Keith Yong](https://github.com/keithyong) .
711
- Examples from [Redux](https://github.com/rackt/redux/tree/master/examples).

0 commit comments

Comments
 (0)