Maps/Sets can't be viewed in devtools

[berwyn]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[x] Feature request
[ ] Documentation issue or request

What is the current behavior?

As noted in ngrx/store-devtools#64 and ngrx/store-devtools#67 using an ES2015 Set or Map works well enough in ngrx, but the devtools won't display the object instead showing an empty object ({ }) when it's first set, and omitting the object in diffs. Additionally, when looking at the graph of the store, the Set/Map will show up as a node, but have no associated value.

Expected behavior:

Devtools should show that a Set/Map was used, and that it was updated as a result of an action.

Minimal reproduction of the problem with instructions:

given:

StoreDevtoolsModule.instrument({ maxAge: 50 })

and

interface MyState {
    data: Map<string, Item>;
}

any reducer that updates this field will succeed, however this property will not be displayed correctly in the devtools, and will not exist in diffs.

Version of affected browser(s),operating system(s), npm, node and ngrx:

[email protected]
[email protected]
@ngrx/[email protected]
@ngrx/[email protected]
@ngrx/[email protected]

Other information:

Based on the other bugs, it seems that the devtools extension may have a serialize argument that may alleviate this, however passing this to ngrx doesn't seem to do anything different, so I'm unsure if there's work on the ngrx side to support this.

[brandonroberts]

The serialize option is already being passed to the Devtools as false. The extension itself does not show Map/Set unless you provide a toJSON patch. See zalmoxisus/redux-devtools-extension#124

[berwyn]

Thanks for the pointer in the right direction, Brandon!

Just in case anyone else wants a quick solution to this, core-js can solve this by polyfilling in the ES7 updates to Map, which includes a toJSON function:

// polyfills.ts
import 'core-js/es7/map';

[vincenzovitale]

Thanks @berwyn , you saved the day! :)

[cliffbroadbent]

@berwyn - Thank you very much! Appreciate you left a note on this ticket. 🥇

[Maks-Yaremenko]

@berwyn Thank you, buddy!

[MaciejCaputa]

It looks like the {Map, Set}#toJSON method has been rejected by TC39 and removed from core-js in v3.0.0.
Shouldn't the extension handle displaying maps and sets itself?

[Zarepheth]

A manually implemented poly fill may also work: Store-DevTools #64

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

[prewk]

Here's a simple one for Sets:

  (Set.prototype as any).toJSON = function() {
    return Array.from(this);
  };

[jdavault]

import { legacy_createStore as createStore, applyMiddleware } from "redux";
import reducers, { initialState } from "./reducers";
import thunkMiddleware from "redux-thunk";
import { composeWithDevTools } from "@redux-devtools/extension";

const composeEnhancers = composeWithDevTools({ serialize: true });

export const store = createStore(
reducers,
initialState,
composeEnhancers(applyMiddleware(thunkMiddleware))
);

//WORKED FOR ME ....