Search code examples
angularreduxrxjsngrx

withLatestFrom not returning


I have the following effect

  @Effect()
  createMission$ = this.actions$.pipe(
    ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.CreateMissionRequest),
    withLatestFrom(this.store$),
    map(([action, state]) => {
      return this.dataService.createMission(state.missions.entities[action.payload.routeId])).pipe(
        map(response => new featureActions.CreateMissionSuccess({response, mission: state.missions.entities[action.payload.routeId]})),
        catchError((error: HttpErrorResponse) => {
          return of(new featureActions.CreateMissionFailed({error}));
        }),
      );
    }),
  );

Instead of manipulating the store, I have a selector in my code like this =>

export const featureAdapter: EntityAdapter<IMissionRoute> = createEntityAdapter<IMissionRoute>({
  selectId: model => model.routeId,
});
export const selectAllEntities: (state: object) => Dictionary<IMissionRoute> = featureAdapter.getSelectors(selectMissionState).selectEntities;


export const getById = () => createSelector(
  selectAllEntities,
  (entities, props) => entities[props.id]
);

I would like to use it in the withLatestFrom

    withLatestFrom((action) => this.store$.pipe(select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}))),
    map(([action, mission]) => {
          /// 
     }

The problem I face is, if I do the later implementation, I will not have 2 observable( one for action one for mission) but only a single one.

I do not understand what to change to make it work


Solution

  • It doesn't look like you need the action in your @Effect, now that you moved the mission select logic to the selector.

    SOmething like this should/may work (untested code below).

    e.g.

     @Effect()
      createMission$ = this.actions$.pipe(
        ofType<featureActions.CreateMissionRequest>(featureActions.ActionTypes.CreateMissionRequest),
        withLatestFrom((action) => this.store$.pipe(select(MissionsStoreSelectors.getById(), {id : action.payload.routeId}))),
        map(_mission => {
          return this.dataService.createMission(_mission).pipe(
            map(response => new featureActions.CreateMissionSuccess({response, mission: _mission})),
            catchError((error: HttpErrorResponse) => {
              return of(new featureActions.CreateMissionFailed({error}));
            }),
          );
        }),
      );