@zalmoxisus zalmoxisus released this Jan 10, 2017 · 165 commits to master since this release

Assets 2

Now you can persist, import, and investigate ImmutableJS data:

screen shot 2017-01-08 at 1 00 22 pm

Just pass the Immutable library to the new serialize parameter like so:

import Immutable from 'immutable';
// ...

const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
  serialize: {
    immutable: Immutable
  }
}));

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:

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]
  }
}));

New serialize parameter and deprecations

We're deprecating (de)serializeState / (de)serializeAction parameters in favour of the new one:

  • serialize (object) - contains { replacer: function, reviver: function, options: object/boolean, refs: array }

    • replacer function(key, value) - JSON replacer function used for both actions and states stringify.

    • reviver function(key, value) - JSON reviver function used for parsing the imported actions and states.

    • options object or boolean:

      • undefined - use regular JSON.stringify to send data - the fast mode.
      • false - handle only circular references.
      • true - handle also dates, regexes, undefined, error objects, symbols, and functions.
      • object, which contains date, regex, undefined, error, and function keys. Fo each of them you can indicate whether to include (if set as true). For function key you can also specify a custom function which handles serialization. See jsan for more details. Example:
      const store = Redux.createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__({
       serialize: { 
         options: {
          undefined: true,
          function: function(fn) { return fn.toString() }
         }
      }
      }));

    Example of usage with mori data structures:

      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
        }
      }));

File an issue if you still need deSerializeState / deSerializeAction, which were getting the whole root state / action payload, instead of (key, value).

Specify action type key for non-redux apps via getActionType callback parameter

If you're using the extension for non-redux apps, now you can specify what will be shown in the monitors:

window.__REDUX_DEVTOOLS_EXTENSION__.connect({ getActionType: (a) => a.Case })

See elmish/elmish#18 for details.