withDevTools does not show Map type

[Diaaz]

when using 'updateState(store, "setViewEntityConfig", { viewEntityConfig });' where viewEntityConfig is an object with a Map in it, the Redux tab in Chrome shows:

This is what console.log shows:

Would it be possible to show the entire objects in de Redux-tab?

Kind regards,

Jeroen.

[rainerhahnekamp]

@Diaaz, good point, let me check and expect an answer once v19 comes out

[rainerhahnekamp]

@Diaaz, you can define now a mapper where you map to any structure you want. If that doesn't fix your problem let us know: https://ngrx-toolkit.angulararchitects.io/docs/with-devtools#withmapper

[Diaaz]

@rainerhahnekamp Thanks for the update, but this does not really solve the problem. The idea of updateState is to help developers inspect the values of objects in a store (without needing to write mappers for all those instances). When the standard type 'Map' is used, the log shows an empty node and ignores the content.

The record type is logged correctly, but the Map type is not.

[rainerhahnekamp]

@Diaaz, you would have to write your own mapper function of course, but I think you want that devtools support the Map type out of the box?

[jdegand]

@Diaaz @rainerhahnekamp I don't think this is a bug. Redux DevTools does not serialize non-JSON objects like Map, which leads them to appearing as empty in the log. I think you have to set a serialize flag to true to see inside. The syntax may be close to this:

export const TodoStore = signalStore(
  { providedIn: 'root' },
  withDevtools({
    name: 'todo-store',
    serialize: {
      options: true // Enable serialization for non-JSON objects
    }
  }),
  withEntities<Todo>(),
  withState({
    selectedIds: [] as number[],
  })
);

[rainerhahnekamp]

@jdegand, thanks yes, I also don't think that Redux DevTools serialize these things. Otherwise it would work.

If I'm not mistaken, there is no serialize option, but a withMapper one:

const Store = signalStore(
  withState(initialState),
  withDevtools(
    'user',
    withMapper((state) => // code to serialize Map in any way you want.
  )
);

[jdegand]

This seems to be a common problem across many different JS state solutions. The serialize solution I posted is how it is done in Redux. See this Zustand issue. I would try to parse and stringify the state inside withMapper.

Check this redux-devtools issue as well. NGXS also has problems.

[rainerhahnekamp]

Yeah, I mean one could build common serialization stuff into this extension. That's not a big deal, but on the other side, a Map should not end up in a signal in the first place.

[jdegand]

Yes, it will not work with change detection.

[Diaaz]

Thanks for the info, I will remove Map from all my signal stores.

[rainerhahnekamp]

Yes, @Diaaz, it is important that you also understand that Map shouldn't be there because of the devtools.

If you have that code:

const data = userStore.personMap();
data.set(1, // data for person);

In this case the personMap is mutated, the Signals is not aware of its change and will therefore not notify any computed, effect, etc. In general, class instances and signals don't go together nicely.