How to store a pairs of key and value, and add them dynamically using action? Map cause 'detect-CodePudding

I want to store some data in the state. The problem is that I have to add it one by one dynamically dispatching an action. I tried two solutions: Record<string, number> and Map<string, number>.

Record is thrwoing an error in the reducer method that says the object is not extensible.

With Map I have a different problem: Detected unserializable state at "airplanes.aircraftRotation"

Maybe I did something wrong while implementing these methods:

export interface State extends EntityState<Airplane> {
  error?: any;
  aircraftRotation: Map<string, number>;
}

export const initialState: State = airplanesAdapter.getInitialState({
  error: null,
  aircraftRotation: new Map<string, number>(),
});

export default State;

And the reducer:

function updateAircraftRotation(state: State, aircraftCallSing: string, rotation: number): State {
  state.aircraftRotation.set(aircraftCallSing, rotation);
  return state;
}

Can someone give me some hint how to do this correctly?

CodePudding user response：

I think you are not returning your store in the reducer properly. As your are using a Map object which might not be immutable/serializable., this might cause issues as raised here.

When ngrx store state contains a Map, why are changes to this Map not recognized?

you might want to try something like this in your reducer. Where you "clone" the Map, and the new copy will allow the data to be serializable?

function updateAircraftRotation(state: State, aircraftCallSing: string, rotation: number): State {
let aircraftRotation =   new Map(state.aircraftRotation)

aircraftRotation.set(aircraftCallSing, rotation);
  return {...state,aircraftRotation } ;
}

CodePudding user response：

A Map is not a fully serializable value, and so RTK will always warn about this.

The better approach here is to use a plain JS object instead, especially since your Map just has string keys.