NgRx Reducer props value is always undefined

Question

I have an effect that returns the data correctly, I am calling an action with the data from an effect but the reducer "detailsList" is always undefined.

Effect calls CustomAction.ShowDetails(props Data)

Effect

response.student.details always has data so the response is correct

if (response === "test") {
      return of(CustomAction.ShowDetails(response.student.details));
    }

Reducer

export interface StudentState {
  newStudentDetails: any[];
}

export const studentInitialState: StudentState = {
  newStudentDetails: null;
};

const reducer = createReducer(
  studentInitialState,
  on(CustomAction.ShowDetails, (state, { detailsList}) => ({
    ...state,
    newStudentDetails: detailsList
  })),

);

export function createStudentReducer(
  state: StudentState,
  action: Action
) {
  return reducer(state, action);
}

detailsList is always undefined

Action

export const ShowDetails = createAction(
  CustomActionTypes.ShowDetails,
  props<{ detailsList: any[] }>()
);

When I am debugging the reducer, detailslist is always undefined. Any Ideas?

Answer 1

You have to do something like this in your effect:

return of(CustomAction.ShowDetails({detailsList: response.student.details}));