@@ -235,8 +281,8 @@ Support us with a monthly donation and help us continue our activities. [[Become
-
## Sponsors
+
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/redux-devtools-extension#sponsor)]
diff --git a/extension/SUMMARY.md b/extension/SUMMARY.md
index 0b731dfc..542612fd 100644
--- a/extension/SUMMARY.md
+++ b/extension/SUMMARY.md
@@ -1 +1 @@
-./docs/README.md
\ No newline at end of file
+./docs/README.md
diff --git a/extension/appveyor.yml b/extension/appveyor.yml
index 83262e78..884e5b13 100644
--- a/extension/appveyor.yml
+++ b/extension/appveyor.yml
@@ -3,7 +3,7 @@ environment:
- nodejs_version: '6'
cache:
- - "%LOCALAPPDATA%/Yarn"
+ - '%LOCALAPPDATA%/Yarn'
- node_modules
install:
diff --git a/extension/book.json b/extension/book.json
index 36d8eb57..d7f27743 100644
--- a/extension/book.json
+++ b/extension/book.json
@@ -15,4 +15,4 @@
"twitter": true
}
}
-}
\ No newline at end of file
+}
diff --git a/extension/docs/API/Arguments.md b/extension/docs/API/Arguments.md
index b92737a3..fe632424 100644
--- a/extension/docs/API/Arguments.md
+++ b/extension/docs/API/Arguments.md
@@ -1,98 +1,141 @@
# Options
Use with
- - `window.__REDUX_DEVTOOLS_EXTENSION__([options])`
- - `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()`
- - `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])`
- - `redux-devtools-extension` npm package:
- ```js
- import { composeWithDevTools } from 'redux-devtools-extension';
- const composeEnhancers = composeWithDevTools(options);
- const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- applyMiddleware(...middleware),
+- `window.__REDUX_DEVTOOLS_EXTENSION__([options])`
+- `window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__([options])()`
+- `window.__REDUX_DEVTOOLS_EXTENSION__.connect([options])`
+- `redux-devtools-extension` npm package:
+
+```js
+import { composeWithDevTools } from 'redux-devtools-extension';
+
+const composeEnhancers = composeWithDevTools(options);
+const store = createStore(
+ reducer,
+ /* preloadedState, */ composeEnhancers(
+ applyMiddleware(...middleware)
// other store enhancers if any
- ));
- ```
+ )
+);
+```
The `options` object is optional, and can include any of the following.
### `name`
-*string* - the instance name to be shown on the monitor page. Default value is `document.title`. If not specified and there's no document title, it will consist of `tabId` and `instanceId`.
-
+
+_string_ - the instance name to be shown on the monitor page. Default value is `document.title`. If not specified and there's no document title, it will consist of `tabId` and `instanceId`.
+
### `actionCreators`
-*array* or *object* - action creators functions to be available in the Dispatcher. See [the example](https://github.com/zalmoxisus/redux-devtools-extension/commit/477e69d8649dfcdc9bf84dd45605dab7d9775c03).
+
+_array_ or _object_ - action creators functions to be available in the Dispatcher. See [the example](https://github.com/zalmoxisus/redux-devtools-extension/commit/477e69d8649dfcdc9bf84dd45605dab7d9775c03).
### `latency`
-*number (in ms)* - if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to `0`, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also `maxAge` to a lower value). Default is `500 ms`.
-
+
+_number (in ms)_ - if more than one action is dispatched in the indicated interval, all new actions will be collected and sent at once. It is the joint between performance and speed. When set to `0`, all actions will be sent instantly. Set it to a higher value when experiencing perf issues (also `maxAge` to a lower value). Default is `500 ms`.
+
### `maxAge`
-*number* (>1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `50`.
+
+_number_ (>1) - maximum allowed actions to be stored in the history tree. The oldest actions are removed once maxAge is reached. It's critical for performance. Default is `50`.
### `trace`
-*boolean* or *function* - if set to `true`, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code ([more details](../Features/Trace.md)). You can use a function (with action object as argument) which should return `new Error().stack` string, getting the stack outside of reducers. Default to `false`.
+
+_boolean_ or _function_ - if set to `true`, will include stack trace for every dispatched action, so you can see it in trace tab jumping directly to that part of code ([more details](../Features/Trace.md)). You can use a function (with action object as argument) which should return `new Error().stack` string, getting the stack outside of reducers. Default to `false`.
### `traceLimit`
-*number* - maximum stack trace frames to be stored (in case `trace` option was provided as `true`). By default it's `10`. Note that, because extension's calls are excluded, the resulted frames could be 1 less. If `trace` option is a function, `traceLimit` will have no effect, as it's supposed to be handled there.
+
+_number_ - maximum stack trace frames to be stored (in case `trace` option was provided as `true`). By default it's `10`. Note that, because extension's calls are excluded, the resulted frames could be 1 less. If `trace` option is a function, `traceLimit` will have no effect, as it's supposed to be handled there.
### `serialize`
-*boolean* or *object* which contains:
+
+_boolean_ or _object_ which contains:
- **options** `object or boolean`:
- - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
- - `false` - will handle also circular references.
- - `true` - will handle also date, regex, undefined, primitives, error objects, symbols, maps, sets and functions.
- - object, which contains `date`, `regex`, `undefined`, `nan`, `infinity`, `error`, `symbol`, `map`, `set` and `function` keys. For each of them you can indicate if to include (by setting as `true`). For `function` key you can also specify a custom function which handles serialization. See [`jsan`](https://github.com/kolodny/jsan) for more details. Example:
- ```js
- const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
- serialize: {
- options: {
- undefined: true,
- function: function(fn) { return fn.toString() }
- }
- }
- }));
- ```
+ - `undefined` - will use regular `JSON.stringify` to send data (it's the fast mode).
+ - `false` - will handle also circular references.
+ - `true` - will handle also date, regex, undefined, primitives, error objects, symbols, maps, sets and functions.
+ - object, which contains `date`, `regex`, `undefined`, `nan`, `infinity`, `error`, `symbol`, `map`, `set` and `function` keys. For each of them you can indicate if to include (by setting as `true`). For `function` key you can also specify a custom function which handles serialization. See [`jsan`](https://github.com/kolodny/jsan) for more details. Example:
+
+ ```js
+ const store = Redux.createStore(
+ reducer,
+ window.__REDUX_DEVTOOLS_EXTENSION__ &&
+ window.__REDUX_DEVTOOLS_EXTENSION__({
+ serialize: {
+ options: {
+ undefined: true,
+ function: function (fn) {
+ return fn.toString();
+ },
+ },
+ },
+ })
+ );
+ ```
- **replacer** `function(key, value)` - [JSON `replacer` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#The_replacer_parameter) used for both actions and states stringify.
Example of usage with [mori data structures](https://github.com/swannodette/mori):
+
```js
- const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
- serialize: {
- replacer: (key, value) => value && mori.isMap(value) ? mori.toJs(value) : value
- }
- }));
+ const store = Redux.createStore(
+ reducer,
+ window.__REDUX_DEVTOOLS_EXTENSION__ &&
+ window.__REDUX_DEVTOOLS_EXTENSION__({
+ serialize: {
+ replacer: (key, value) =>
+ value && mori.isMap(value) ? mori.toJs(value) : value,
+ },
+ })
+ );
```
+
In addition, you can specify a data type by adding a [`__serializedType__`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/helpers/index.js#L4) key. So you can deserialize it back while importing or persisting data. Moreover, it will also [show a nice preview showing the provided custom type](https://cloud.githubusercontent.com/assets/7957859/21814330/a17d556a-d761-11e6-85ef-159dd12f36c5.png):
+
```js
- const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
- serialize: {
- replacer: (key, value) => {
- if (Immutable.List.isList(value)) { // use your custom data type checker
- return {
- data: value.toArray(), // ImmutableJS custom method to get JS data as array
- __serializedType__: 'ImmutableList' // mark you custom data type to show and retrieve back
- }
- }
- }
- }
- }));
+ const store = Redux.createStore(
+ reducer,
+ window.__REDUX_DEVTOOLS_EXTENSION__ &&
+ window.__REDUX_DEVTOOLS_EXTENSION__({
+ serialize: {
+ replacer: (key, value) => {
+ if (Immutable.List.isList(value)) {
+ // use your custom data type checker
+ return {
+ data: value.toArray(), // ImmutableJS custom method to get JS data as array
+ __serializedType__: 'ImmutableList', // mark you custom data type to show and retrieve back
+ };
+ }
+ },
+ },
+ })
+ );
```
+
- **reviver** `function(key, value)` - [JSON `reviver` function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#Using_the_reviver_parameter) used for parsing the imported actions and states. See [`remotedev-serialize`](https://github.com/zalmoxisus/remotedev-serialize/blob/master/immutable/serialize.js#L8-L41) as an example on how to serialize special data types and get them back:
+
```js
- const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
- serialize: {
- reviver: (key, value) => {
- if (typeof value === 'object' && value !== null && '__serializedType__' in value) {
- switch (value.__serializedType__) {
- case 'ImmutableList': return Immutable.List(value.data);
- }
- }
- }
- }
- }));
+ const store = Redux.createStore(
+ reducer,
+ window.__REDUX_DEVTOOLS_EXTENSION__ &&
+ window.__REDUX_DEVTOOLS_EXTENSION__({
+ serialize: {
+ reviver: (key, value) => {
+ if (
+ typeof value === 'object' &&
+ value !== null &&
+ '__serializedType__' in value
+ ) {
+ switch (value.__serializedType__) {
+ case 'ImmutableList':
+ return Immutable.List(value.data);
+ }
+ }
+ },
+ },
+ })
+ );
```
- **immutable** `object` - automatically serialize/deserialize immutablejs via [remotedev-serialize](https://github.com/zalmoxisus/remotedev-serialize). Just pass the Immutable library like so:
@@ -101,134 +144,181 @@ The `options` object is optional, and can include any of the following.
import Immutable from 'immutable'; // https://facebook.github.io/immutable-js/
// ...
// Like above, only showing off compose this time. Reminder you might not want this in prod.
- const composeEnhancers = typeof window === 'object' && typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined' ?
- window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
- serialize: {
- immutable: Immutable
- }
- }) : compose;
+ const composeEnhancers =
+ typeof window === 'object' &&
+ typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ !== 'undefined'
+ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+ serialize: {
+ immutable: Immutable,
+ },
+ })
+ : compose;
```
+
It will support all ImmutableJS structures. You can even export them into a file and get them back. The only exception is `Record` class, for which you should pass in addition the references to your classes in `refs`.
+
- **refs** `array` - ImmutableJS `Record` classes used to make possible restore its instances back when importing, persisting... Example of usage:
- ``` js
+
+ ```js
import Immutable from 'immutable';
// ...
-
- const ABRecord = Immutable.Record({ a:1, b:2 });
- const myRecord = new ABRecord({ b:3 }); // used in the reducers
-
- const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
- serialize: {
- immutable: Immutable,
- refs: [ABRecord]
- }
- }));
+
+ const ABRecord = Immutable.Record({ a: 1, b: 2 });
+ const myRecord = new ABRecord({ b: 3 }); // used in the reducers
+
+ const store = createStore(
+ rootReducer,
+ window.__REDUX_DEVTOOLS_EXTENSION__ &&
+ window.__REDUX_DEVTOOLS_EXTENSION__({
+ serialize: {
+ immutable: Immutable,
+ refs: [ABRecord],
+ },
+ })
+ );
```
-
+
Also you can specify alternative values right in the state object (in the initial state of the reducer) by adding `toJSON` function:
In the example bellow it will always send `{ component: '[React]' }`, regardless of the state's `component` value (useful when you don't want to send lots of unnecessary data):
+
```js
function component(
- state = { component: null, toJSON: () => ({ component: '[React]' }) },
+ state = { component: null, toJSON: () => ({ component: '[React]' }) },
action
) {
switch (action.type) {
- case 'ADD_COMPONENT': return { component: action.component };
- default: return state;
+ case 'ADD_COMPONENT':
+ return { component: action.component };
+ default:
+ return state;
}
}
```
-You could also alter the value. For example when state is `{ count: 1 }`, we'll send `{ counter: 10 }` (notice we don't have an arrow function this time to use the object's `this`):
+You could also alter the value. For example when state is `{ count: 1 }`, we'll send `{ counter: 10 }` (notice we don't have an arrow function this time to use the object's `this`):
+
```js
function counter(
- state = { count: 0, toJSON: function (){ return { conter: this.count * 10 }; } },
+ state = {
+ count: 0,
+ toJSON: function () {
+ return { conter: this.count * 10 };
+ },
+ },
action
) {
switch (action.type) {
- case 'INCREMENT': return { count: state.count + 1 };
- default: return state;
+ case 'INCREMENT':
+ return { count: state.count + 1 };
+ default:
+ return state;
}
}
```
### `actionSanitizer` / `stateSanitizer`
-- **actionSanitizer** (*function*) - function which takes `action` object and id number as arguments, and should return `action` object back. See the example bellow.
-- **stateSanitizer** (*function*) - function which takes `state` object and index as arguments, and should return `state` object back.
+
+- **actionSanitizer** (_function_) - function which takes `action` object and id number as arguments, and should return `action` object back. See the example bellow.
+- **stateSanitizer** (_function_) - function which takes `state` object and index as arguments, and should return `state` object back.
Example of usage:
```js
-const actionSanitizer = (action) => (
- action.type === 'FILE_DOWNLOAD_SUCCESS' && action.data ?
- { ...action, data: '<- Clicked: {counter} times - {' '} - - {' '} - - {' '} - - {' '} + Clicked: {counter} times {' '} + {' '} + {' '}
); @@ -25,7 +26,7 @@ Counter.propTypes = { autoIncrement: PropTypes.func.isRequired, incrementAsync: PropTypes.func.isRequired, decrement: PropTypes.func.isRequired, - counter: PropTypes.number.isRequired + counter: PropTypes.number.isRequired, }; export default Counter; diff --git a/extension/examples/counter/containers/App.js b/extension/examples/counter/containers/App.js index 91e70318..47287ecf 100644 --- a/extension/examples/counter/containers/App.js +++ b/extension/examples/counter/containers/App.js @@ -5,7 +5,7 @@ import * as CounterActions from '../actions/counter'; function mapStateToProps(state) { return { - counter: state.counter + counter: state.counter, }; } diff --git a/extension/examples/counter/index.html b/extension/examples/counter/index.html index 1eff16a5..0f963144 100644 --- a/extension/examples/counter/index.html +++ b/extension/examples/counter/index.html @@ -4,8 +4,7 @@