redux-devtools/packages/redux-devtools-serialize
Nathan Bierema ba5bd18d5b Publish
- remotedev-redux-devtools-extension@3.0.0
 - d3-state-visualizer@1.4.2
 - d3tooltip@1.3.2
 - map2tree@1.5.2
 - react-base16-styling@0.8.2
 - react-dock@0.4.2
 - react-json-tree@0.15.2
 - @redux-devtools/app@1.0.0
 - @redux-devtools/chart-monitor@1.9.2
 - @redux-devtools/cli@1.0.0
 - @redux-devtools/dock-monitor@1.4.2
 - @redux-devtools/extension@3.0.0
 - @redux-devtools/inspector-monitor-test-tab@0.7.4
 - @redux-devtools/inspector-monitor-trace-tab@0.2.4
 - @redux-devtools/inspector-monitor@1.0.2
 - @redux-devtools/instrument@1.11.2
 - @redux-devtools/log-monitor@2.3.2
 - @redux-devtools/remote@0.6.1
 - @redux-devtools/rtk-query-monitor@1.0.2
 - @redux-devtools/serialize@0.3.2
 - @redux-devtools/slider-monitor@2.0.0
 - @redux-devtools/ui@1.0.0
 - @redux-devtools/utils@1.0.0
 - @redux-devtools/core@3.9.2
 - d3-state-visualizer-tree-example@0.1.2
 - react-dock-demo@0.1.2
 - react-json-tree-example@1.1.4
 - test-demo@0.1.2
 - inspector-demo@0.1.2
 - rtk-query-demo@0.1.2
 - slider-todomvc@0.1.4
 - counter-redux@0.1.4
 - todomvc@0.2.3
2022-01-07 21:24:58 -05:00
..
src chore(deps): update typescript-eslint monorepo to v5 (major) (#907) 2021-10-21 19:08:35 +00:00
test chore(deps): update typescript-eslint monorepo to v5 (major) (#907) 2021-10-21 19:08:35 +00:00
.babelrc chore(*): clean up babel configs (#816) 2021-08-29 23:25:48 +00:00
.eslintignore feat(redux-devtools-serialize): convert to TypeScript (#621) 2020-08-29 00:14:49 -04:00
.eslintrc.js chore(*): move devDependencies back to packages (#870) 2021-09-18 23:47:03 +00:00
CHANGELOG.md chore(*): run prettier 2021-03-06 10:17:55 -05:00
jest.config.js feat(redux-devtools-serialize): convert to TypeScript (#621) 2020-08-29 00:14:49 -04:00
package.json Publish 2022-01-07 21:24:58 -05:00
README.md chore(*): make more packages scoped (#692) 2020-12-21 15:46:28 -05:00
tsconfig.json feat(redux-devtools-serialize): convert to TypeScript (#621) 2020-08-29 00:14:49 -04:00

Serialize ImmutableJS data

Installation

yarn add @redux-devtools/serialize

Usage with ImmutableJS data structures

Just pass the Immutable library to our class:

import Immutable from 'immutable';
import Serialize from '@redux-devtools/serialize';
const { stringify, parse } = Serialize.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 for more examples of usage.

Usage with ImmutableJS Record classes

To parse a Record class back, you need to specify a reference to it:

import Immutable from 'immutable';
import Serialize from '@redux-devtools/serialize';

const ABRecord = Immutable.Record({ a: 1, b: 2 });
const { stringify, parse } = Serialize.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:

import Immutable from 'immutable';
import Serialize 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 } = Serialize.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

  • Record
  • Range
  • Repeat
  • Map
  • OrderedMap
  • List
  • Set
  • OrderedSet
  • Seq
  • Stack

ES6

  • Symbol
  • Map
  • Set
  • Typed Array

License

MIT