Displaying Map in state

[chroth7]

Problem:

I have multiple Maps (ES2015) in my redux state, and when I inspect them in your awesome extension, it seems to think that it's an Object (without keys), and I cannot expand the details (see screenshot).

Idea:
Best case: expand the Map
Alternative: open the Map in the console...?

[zalmoxisus]

Thanks for the report. There should be one of two reasons:

1. jsan doesn't serialize them. You can try to import jsan from 'jsan' and do jsan.parse(jsan.stringify(pathMap)) inside your application. Also, jsan.parse(jsan.stringify(pathMap, null, null, true)). If the first doesn't work, and the latter solves the issue, then we can use it. If not, it should be implemented there.
2. react-json-tree doesn't support them and should be implemented there.

[chroth7]

Thanks for the quick reply - I just ran:

console.log(pathMap);
console.log(jsan.parse(jsan.stringify(pathMap)));
console.log(jsan.parse(jsan.stringify(pathMap, null, null, true)));

and as you suspected, that gave me (chrome):

>> Map {"[0]" => "xyz", "[0,0]" => "abc",…}
>> Object {}
>> Object {}

So if I understand correctly, due to this fact, we cannot see it?
Do you want me to raise an issue at https://github.com/kolodny/jsan?

[zalmoxisus]

Thanks for the details. Yes, it will be great to investigate it there.

[kolodny]

weird, it seems to work for me. You may need to be using the latest version of jsan which used the .toJson method https://github.com/kolodny/jsan/blob/master/lib/cycle.js#L41-L43

Try this:

$ cd /tmp/map-jsan
$ npm init -y
$ npm install immutable jsan
$ echo " var map = require('immutable').Map({a: 1});\n console.log(map);\n console.log(require('jsan').stringify(map));" > index.js
$ cat index.js
 var map = require('immutable').Map({a: 1});
 console.log(map);
 console.log(require('jsan').stringify(map));
$ node index.js
Map { "a": 1 }
{"a":1}
$

[zalmoxisus]

@kolodny, thanks for chiming in. As I understood, the issue is not with the immutable library, but with the native Map structure.

[kolodny]

Oh, this was about Maps. Ok, I think I need to spend some more time to make that work

[kolodny]

Hmm, thinking about the problem, I'm not sure I want to implement this in jsan. Extending Map.prototype.toJSON is probably the correct way to go. How would you stringify this?

var isAnA = {toString: () => 'a'};
var obj1 = {};
var ob2 = {};
var map = new Map([
  ['a', 1],
  [isAnA, 2],
  [obj1, 3],
  [obj2, 4],
]);

Best bet would be to add something like this to your app:

if (process.env.NODE_ENV !== 'production') {
  Map.prototype.toJSON = function() {
    var obj = {};
    this.forEach((value, key) => obj[key] = value);
    return obj;
  }
}

[zalmoxisus]

@kolodny, I see.

I guess just including a polyfill like this in the app should solve the issue. @chroth7, could you check?

[chroth7]

Awesome, thanks for the super quick feedback and input.

Added the polyfill you mentioned and look at that:

Perfect! Thanks, very much appreciated!
(I will close this issue and the one in the other repo)

[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 ....