mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-11-24 02:23:57 +03:00
b82de74592
* Use rollup for d3tooltip * Use rollup for map2tree * Set moduleResolution * Use rollup for d3-state-visualizer * Use rollup for react-base16-styling * Use rollup for react-dock * Use rollup for react-json-tree * Use rollup for redux-devtools * Use rollup for redux-devtools-intrument * Use rollup for redux-devtools-chart-monitor * Update export * Use rollup for redux-devtools-dock-monitor * Use rollup for redux-devtools-inspector-monitor * Fix inspector demo * Fix invalid eslint config * Use rollup for inspector-monitor-test-tab * Use rollup for inspector-monitor-trace-tab * Use rollup for redux-devtools-log-monitor * Use rollup for redux-devtools-remote * Use rollup in redux-devtools-rtk-query-monitor * Use rollup for redux-devtools-serialize * Fix redux-devtools examples * Use rollup for redux-devtools-slider-monitor * Fix slider examples * Use rollup for redux-devtools-ui * Use rollup for redux-devtools-utils * Use rollup for redux-devtools-extension * Use rollup for redux-devtools-app * Fix Webpack app build * Fix extension build * Turn on minimization * Update CLI
116 lines
2.6 KiB
Markdown
116 lines
2.6 KiB
Markdown
# Serialize ImmutableJS data
|
|
|
|
### Installation
|
|
|
|
```
|
|
yarn add @redux-devtools/serialize
|
|
```
|
|
|
|
### Usage with ImmutableJS data structures
|
|
|
|
Just pass the Immutable library to our class:
|
|
|
|
```js
|
|
import Immutable from 'immutable';
|
|
import { immutable } from '@redux-devtools/serialize';
|
|
const { stringify, parse } = immutable(Immutable);
|
|
|
|
const data = Immutable.fromJS({ foo: 'bar', baz: { qux: 42 } });
|
|
const serialized = stringify(data);
|
|
console.log(serialized);
|
|
// {"data":{"foo":"bar","baz":{"data":{"qux":42},"__serializedType__":"ImmutableMap"}},"__serializedType__":"ImmutableMap"}
|
|
const parsed = parse(serialized);
|
|
console.log(Immutable.is(parsed, data));
|
|
// true
|
|
```
|
|
|
|
See [the tests](https://github.com/reduxjs/remote-devtools/blob/master/packages/remotedev-serialize/test/immutable.spec.js) for more examples of usage.
|
|
|
|
### Usage with ImmutableJS Record classes
|
|
|
|
To parse a Record class back, you need to specify a reference to it:
|
|
|
|
```js
|
|
import Immutable from 'immutable';
|
|
import { immutable } from '@redux-devtools/serialize';
|
|
|
|
const ABRecord = Immutable.Record({ a: 1, b: 2 });
|
|
const { stringify, parse } = immutable(Immutable, [ABRecord]);
|
|
|
|
const myRecord = new ABRecord({ b: 3 });
|
|
const serialized = stringify(myRecord);
|
|
console.log(serialized);
|
|
// {"data":{"a":1,"b":3},"__serializedType__":"ImmutableRecord","__serializedRef__":0}
|
|
const parsed = parse(serialized);
|
|
console.log(Immutable.is(parsed, myRecord));
|
|
// true
|
|
```
|
|
|
|
### Passing custom serialization functions
|
|
|
|
You can pass custom replacer and reviver functions to Serialize:
|
|
|
|
```js
|
|
import Immutable from 'immutable';
|
|
import { immutable } from '@redux-devtools/serialize';
|
|
|
|
function customReplacer(key, value, defaultReplacer) {
|
|
if (value === 1) {
|
|
return { data: 'one', __serializedType__: 'number' };
|
|
}
|
|
return defaultReplacer(key, value);
|
|
}
|
|
|
|
function customReviver(key, value, defaultReviver) {
|
|
if (
|
|
typeof value === 'object' &&
|
|
value.__serializedType__ === 'number' &&
|
|
value.data === 'one'
|
|
) {
|
|
return 1;
|
|
}
|
|
return defaultReviver(key, value);
|
|
}
|
|
|
|
const { stringify, parse } = immutable(
|
|
Immutable,
|
|
null,
|
|
customReplacer,
|
|
customReviver
|
|
);
|
|
|
|
const map = Immutable.Map({ a: 1, b: 2 });
|
|
const serialized = stringify(map);
|
|
console.log(serialized);
|
|
// {"data":{"a":{"data":"one","__serializedType__":"number"},"b":2},"__serializedType__":"ImmutableMap"}
|
|
const parsed = parse(serialized);
|
|
console.log(Immutable.is(parsed, map));
|
|
// true
|
|
```
|
|
|
|
### Supported
|
|
|
|
#### ImutableJS
|
|
|
|
- [x] Record
|
|
- [x] Range
|
|
- [x] Repeat
|
|
- [x] Map
|
|
- [x] OrderedMap
|
|
- [x] List
|
|
- [x] Set
|
|
- [x] OrderedSet
|
|
- [x] Seq
|
|
- [x] Stack
|
|
|
|
#### ES6
|
|
|
|
- [x] Symbol
|
|
- [x] Map
|
|
- [x] Set
|
|
- [ ] Typed Array
|
|
|
|
### License
|
|
|
|
MIT
|