Get data after api call in ngrx effect

Question

I'm using Ngrx Effect to get data from API, then I would get that data in my component.

In component

schedules$ = this.store.pipe(select(selectSchedulings));
ngOnInit() {
  this.store.dispatch(new GetSchedules());
}

In actions I have created two types

export class GetSchedules implements Action {
  public readonly type = ESchedulesActions.GetSchedulesByDate;
}
export class GetSchedulesSuccess implements Action {
  public readonly type = ESchedulesActions.GetSchedulesByDateSuccess;
  constructor(public payload: ISchedules[]) {}
}

export type SchedulesAction = GetSchedules | GetSchedulesSuccess;

Then In my effects

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

  constructor(private actions$: Actions, private apiCallsService: ApiCallsService) {}
}

I have initialized my store in state

import { ISchedules } from '../../shared/interfaces/scheduling.interface';
export interface ISchedulesState {
  schedulings: ISchedules;
}

    export const initialSchedulingState: ISchedulesState = {
      schedulings: {
        status: '',
        data: [
          {
          ..... Init values....
          }
        ]
      }
    };

And reducers

export const SchedulingReducers = (
  state = initialSchedulingState,
  action: SchedulesAction
): ISchedulesState => {
  switch (action.type) {
    case ESchedulesActions.GetSchedulesByDate: {
      return {
        ...state
      };
    }
    case ESchedulesActions.GetSchedulesByDateSuccess: {
      return {
        ...state
      };
    }
    default:
      return state;
  }
};

When I run my app , I only get Init values. I see in store dev tools that the api is triggered and data is stored, but why schedules$ don't get update ?

But in your reducer for GetSchedulesByDateSuccess action there is no payload, that you want to add to the state, you're returning just state — Vadi

timdeschryver timdeschryver · Accepted Answer · 2019-07-22T16:37:56

 case ESchedulesActions.GetSchedulesByDateSuccess: {
      return {
        ...state
      };
    }

Here, you're just returning a cope of the state. What you should do is using the action payload to update the state (I don't exactly know how your state is structured, but this gives an idea):

 case ESchedulesActions.GetSchedulesByDateSuccess: {
      return {
        ...state,
        schedulings: action.payload
      };
    }

Get data after api call in ngrx effect

1 Answers