Map just shows as empty entity in devtools

[ekiep]

Hello, used the new Map in ngrx and try to debug it in the devtools for Chrome (58.0.3029.110) on macOS 10.12.5, but it shows as an empty entity. However test are not failing and when I print the Map it looks fine.

I ll add my State + initial state, maybe it helps understanding.

export interface State {
  myMap: Map<string, Item[]>;
}

const INITIAL_STATE: State = {
  myMap: new Map<string, Item[]>().set('default', []),
};

[juanlizarazo]

@ekiep

I run into this as well.

The new redux devtools extension from version v2.14.0 and up has support for { serialize: true }. Unfortunately, @ngrx/store-devtools doesn't support that just yet. This allows serialization of Maps, Sets and more.

So, my work around in the meantime for nice development experience is to add the .toJSON method to the Map prototype which works great and I can see my Maps in state in redux dev tools.

if (environment.envName === 'dev') {
  (Map.prototype as any).toJSON = function () {
    return JSON.parse(JSON.stringify([...this]));
  };
}