Reducer thrown " error object null is not iterable" in ngrx

Question

I have a component called doctors.list.component.ts which renders a list of doctors. I getting this doctor from API using @ngrx/effect. I want to add a new doctor to this list in using ng-modal. the flow is when the user selects the doctor form ng-modal it has to be added to the existing doctor-list.for that I wrote new action and reducer. this reducer throws error object null is not iterable

this my doctorlist.action.ts

import { createAction, props } from '@ngrx/store';
import { Doctors } from 'src/app/admin/models/doctorProfileAdmin'

export const loadDoctors = createAction('[Doctors] Doctors List Request', props<{ hospitalId: string }>())

export const loadDoctorsSuccess = createAction('[Doctors] Doctors List Load Success', props<{ doctors: Doctors[] }>())

export const loadDoctorsFail = createAction('[Doctors] Doctors List Load Fail', props<{ errorMessage: string }>())

export const addExistingDoctorToList = createAction('[Doctors] Doctors List Load Success', props<{ doctor: Doctors }>())

in my doctor.list.reducer.ts

import { createReducer, on, Action } from '@ngrx/store';
import { DoctorListState } from '../state/doctorList.state';
import { loadDoctors, loadDoctorsSuccess, loadDoctorsFail,addExistingDoctorToList } from '../actions/doctorList.actions';


const initialState: DoctorListState = {
    doctors:null,
    error: null,
    isLoading: false
};

const doctorListReducer = createReducer(initialState,
    on(loadDoctors, (state) => {
        return { ...state, isLoading: true };
    }),
    on(loadDoctorsSuccess, (state, { doctors }) => {
        return { ...state, doctors: doctors, isLoading: false };
    }),
    on(loadDoctorsFail, ((state, { errorMessage }) => {
        return { ...state, errorMes: errorMessage, isLoading: false };
    })),
    on(addExistingDoctorToList, (state, { doctor }) => {
        return { ...state, doctors:[...state.doctors,doctor], isLoading: false };
    }),

);

export function reducer(state: DoctorListState | undefined, action: Action) {
    return doctorListReducer(state, action);
}

I change my initialState doctors property to the empty array as well .then this error not appears but my doctor list also not displayed in the component

this how I get doctors to my doctors.list.component.ts when component initializes.

 this.store.pipe(select(selectDoctorsList)).pipe(skip(1)).subscribe(payload => {
        this.doctorList = payload;
 })

add new docotr event click function

addNewDoctor(){
   this.store.dispatch(addExistingDoctorToList({doctor:selectedDoctor}))
}

i couldn't understand what i am doing wrong here.

Answer 1

look at actions definition

export const loadDoctorsSuccess = createAction('[Doctors] Doctors List Load Success', props<{ doctors: Doctors[] }>())

export const addExistingDoctorToList = createAction('[Doctors] Doctors List Load Success', props<{ doctor: Doctors }>())

these 2 actions have the same String which is used as action.type. they should be unique so ngrx will treat them as different actions.