'@ngrx/entity EntityAdapter Functions for Reducer do not Change Store State

So I have a custom entity, which I will add to in the UI:

meeting.ts:

export interface Meeting {
  summary: MeetingSummary;
  agenda: any;
  audience?: Audience[];
  venue?: {
    lat?: number;
    long?: number;
  };
  invitationKey?: string;
  key: string;
  activeProposalId?: string;
  createdAt?: string;
  updatedAt?: string;
  createdBy?: string;
  updatedBy?: string;
  owner?: string;
}

I scaffolded @ngrx/entity using the new creator syntax:

meeting.actions.ts:

export const beginLoadMeetings = createAction(
  '[ Meeting ] Begin Load Meetings',
  props<{ uid: string }>()
);

export const loadMeetings = createAction(
  '[Meeting/API] Load Meetings',
  props<{ meetings: Meeting[] }>()
);

export const beginAddMeeting = createAction(
  '[ Meeting ] Begin Add  New Meeting',
  props<{ meeting: Meeting }>()
);

export const addMeeting = createAction(
  '[ Meeting ] Add Meeting to Store',
  props<{ meeting: Meeting }>()
);

export const upsertMeeting = createAction(
  '[Meeting/API] Upsert Meeting',
  props<{ meeting: Meeting }>()
);

export const addMeetings = createAction(
  '[Meeting/API] Add Meetings',
  props<{ meetings: Meeting[] }>()
);
// ...

And the corresponding reducer

meeting.reducer.ts

export interface MeetingState extends EntityState<Meeting> {
  loading: boolean;
}

export interface State extends fromRoot.State {
  meetings: MeetingState;
}

export const adapter: EntityAdapter<Meeting> = createEntityAdapter<Meeting>(
  {
    selectId: (meeting: Meeting) => (meeting.key)
  }
);

export const initialState: MeetingState = adapter.getInitialState({
  loading: false
});

const meetingReducer = createReducer(
  initialState,
  on(MeetingActions.beginLoadMeetings,
    (state) => ({...state, loading: true})
  ),
  on(MeetingActions.beginAddMeeting,
    (state) => state
  ),
  on(MeetingActions.addMeeting,
    (state, action) => adapter.addOne(action.meeting, state)
  ),
  on(MeetingActions.upsertMeeting,
    (state, action) => adapter.upsertOne(action.meeting, state)
  ),
  //...
);

I will dispatch a beginAddMeeting action, which triggers an effect which stores to the Backend. This happens correctly and the effect also correctly dispatches the addMeeting action with the correct payload, which I can verify in the DevTools. However, the state does not change, and the entity is not getting added to the store, so all my containers fail to note the change.

Curiously enough, when I dispatch beginLoadMeetings, which triggers a similar effect, only gets all entities from the Backend, The store gets correctly updated. In short, addMany works, addOne and upsertOne do nothing to the state. The reducer does not even react when I do the update without the adapter, which leads me to suspect there is something wrong with my config. Spent half a week on fixing this, with no success so I hope I find some help here. Thanks!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source