Quiero almacenar algunos datos en el estado. El problema es que tengo que agregarlo uno por uno despachando dinámicamente una acción. Probé dos soluciones: Record<string, number> y Map<string, number> .
Record está arrojando un error en el método reducer que dice que el objeto no es extensible.
Con Map tengo un problema diferente: se Detected unserializable state at "airplanes.aircraftRotation"
Tal vez hice algo mal al implementar estos métodos:
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;Y el reductor:
function updateAircraftRotation(state: State, aircraftCallSing: string, rotation: number): State { state.aircraftRotation.set(aircraftCallSing, rotation); return state; }¿Puede alguien darme alguna pista de cómo hacer esto correctamente?
Un Map no es un valor completamente serializable, por lo que RTK siempre advertirá sobre esto.
El mejor enfoque aquí es usar un objeto JS simple, especialmente porque su Map solo tiene claves de cadena.
Creo que no estás devolviendo tu tienda en el reductor correctamente. Como está utilizando un objeto Map que podría no ser inmutable/serializable, esto podría causar problemas como los planteados aquí.
es posible que desee probar algo como esto en su reductor. ¿Donde "clona" el Mapa y la nueva copia permitirá que los datos sean serializables?
function updateAircraftRotation(state: State, aircraftCallSing: string, rotation: number): State { let aircraftRotation = new Map(state.aircraftRotation) aircraftRotation.set(aircraftCallSing, rotation); return {...state,aircraftRotation } ; }Es una buena práctica que no almacene ningún dato en Redux si no es serializable. Un objeto Map no se puede serializar porque tiene métodos de instancia como set() que se perderán si se convierte a y desde JSON.
El tipo de TypeScript Record<string, number> describe cualquier objeto con claves de string y valores number . Este es el tipo correcto para usar, pero querrá implementarlo con un objeto simple en lugar de su new Map<string, number>() .
El valor inicial sería simplemente un objeto vacío {} .
export interface State extends EntityState<Airplane> { error?: any; aircraftRotation: Record<string, number>; } export const initialState: State = airplanesAdapter.getInitialState({ error: null, aircraftRotation: {}, }); En su reductor, ya no tiene el método set del Map , por lo que deberá actualizar su objeto de manera diferente.
Estoy confundido por su código reductor ya que veo dos argumentos arbitrarios y ninguna action .
Probablemente necesitará devolver un nuevo objeto que copie todas las propiedades del anterior, así:
return { ...state, aircraftRotation: { ...state.aircraftRotation, [aircraftCallSing]: rotation } }Con el middleware de inmutabilidad (Redux Toolkit), puede configurar la propiedad directamente, así:
state.aircraftRotation[aircraftCallSing] = rotation;