CODEWITHSUNDEEP
javascriptangularreduxrxjsngrx
infodev
infodev

Reputation: 5235

Chaining two actions in ngrx

I have two related actions that should be triggered one after another.

I would like to do this with @effects or reducers

in my slider.component I trigger the first parent action

valueChange(event: MatSliderChange) {
  this.store.dispatch(
    new SetSelectDateTime({ dateSelect: this.date, timeSelect: event.source.displayValue })
  );
}

Then in reducer

case ESelectDateTimeActionTypes.SetSelectDateTime: {

  return {
    ...state,
    dateTimeSelect: action.payload
  };
}

Now I should trigger the second actions to get new data dependings on selected time So I created an effect updateActualTrips

export class SchedulingsEffects {
  constructor(
    private actions$: Actions,
    private apiCallsService: ApiCallsService
  ) {}
  loadSchedulings$ = createEffect(() =>
    this.actions$.pipe(
      ofType(ESchedulesActions.GetSchedulesByDate),
      mergeMap(() =>
        this.apiCallsService.getSchedulings().pipe(
          map(trips => ({ type: ESchedulesActions.GetSchedulesByDateSuccess, payload: trips })),
          catchError(() => EMPTY)
        )
      )
    )
  );

  $LoadKpiMission = createEffect(() =>
    this.actions$.pipe(
      ofType<any>(EKpiActions.GetMissionsByStation),
      mergeMap(action =>
        this.apiCallsService.getKpiMissionByStation(action.payload, '2016-04-18').pipe(
          map(trips => ({ type: EKpiActions.GetMissionsByStationSuccess, payload: trips })),
          catchError(() => EMPTY)
        )
      )
    )
  );
  $updateActualTrips = createEffect(() =>
    this.actions$.pipe(
      ofType<any>(ESelectDateTimeActionTypes.SetSelectDateTime),
      map(action => ({ type: ESchedulesActions.GetNextSchedulesByTime, payload: action.payload }))
    )
  );
}

The problem is that the effect is never triggered but the selected time is updated

Update I noticed that the effect is triggered the first time when SetSelectDateTime is getting initialized

Upvotes: 0

Views: 224

Answers (1)

evilstiefel
evilstiefel

Reputation: 496

In your example code, there is no effect waiting for the action ESchedulesActions.GetNextSchedulesByTime, the only other actions you are waiting for are ESchedulesActions.GetSchedulesByDate and EKpiActions.GetMissionsByStation.

Are you missing an actual effect here or do we not see the complete code? Nothing in your code would ask the API for new data when SetSelectDateTime is dispatched.

Or are you saying that ESchedulesActions.GetNextSchedulesByTime is never dispatched to the store in the first place (when the effect listening for SetSelectDateTime is run)?

Upvotes: 1

Related Questions