deeppatel234 / react-context-devtool

React context and useReducer debugging tool
MIT License
235 stars 35 forks source link

Support Javascript Maps #29

Closed Tenkir closed 3 years ago

Tenkir commented 3 years ago

Is your feature request related to a problem? Please describe.

React Context DevTool does not properly handle rending state javascript Map objects.

In this example, I assign the id of the payload to the Map key.

In the state view, it renders as:

"Map [855c35fb-ae5a-43da-93fa-1e2ddab28d88,[object Object]]"

However, when viewing the action sent, it displays as:

{
  "type":string"ADD_ACTION"
  "payload": {
    "id":string"855c35fb-ae5a-43da-93fa-1e2ddab28d88"
    "slug":string"some-action"
  }
}

I am setting the context state as:

  [ActionTypes.ADD_ACTION]: (state: TActionState, payload: TActionPayload) => {
    const tempMap = state.actionListeners;
    tempMap.set(payload.id, payload);

    return {
      ...state,
      eventListeners: tempMap
    };
  },

I am able to access the content as expected, and the Map is stored correctly in the context state.

Describe the solution you'd like

When displaying a map in the state view, I'd expect to be able to twirl down the object and see its contents, like I can when viewing the action.

Screenshots

State: image

Action: image

deeppatel234 commented 3 years ago

Map support added in react-context-devtool. please update extension for the changes