update an array inside an EntityAdapter

Question

I have the following EntityAdapter

export interface IDroneRoute {
  assignedDroneId?: number;
  routeId: string;
  rerouting?: boolean;
  waypoints: Waypoint[];
}

export const featureAdapter: EntityAdapter<IDroneRoute> = createEntityAdapter<IDroneRoute>({
  selectId: model => model.routeId,
});

I would like to have an action that add, remove and delete a waypoint in the array

const ADD_ROUTE_POINT = (state: State, action: any) => {
  return featureAdapter.updateOne({
    id: action.payload.routeId,
    changes: {// add waypoint},
  }, state);
};

how do I access the current array of the item inside the changes so that I can update it ?

Answer 1

changes corresponds to the entity you want to update (IDroneRoute), so before you return featureAdapter.updateOne({ you can build your updated object.

const REMOVE_ROUTE_POINT = (state: State, action: any) => {
  const droneRoute = {...state.entities[action.payload.routeId]}
  droneRoute.waypoints = droneRoute.waypoints.filter(
    wp => wp.id !== action.payload.waypoint.id); 

  return featureAdapter.updateOne({
    id: action.payload.routeId,
    changes: droneRoute,
  }, state);
};

const ADD_ROUTE_POINT = (state: State, action: any) => {
  const droneRoute = {...state.entities[action.payload.routeId]};
  droneRoute.waypoints = [...droneRoute.waypoints, ...action.payload.waypoint];

  return featureAdapter.updateOne({
    id: action.payload.routeId,
    changes: droneRoute,
  }, state);
};