can't get payload to populate new state ngrx 8

Question

Below is the reducer and effects file that sets up state fetches data from a database and should update state with data, which is an array, but I can't get it to update state with the payload.

The reducer file:

import { Action, createReducer, on } from '@ngrx/store';
import { Nurse } from '../../shared/models/nurse.model';

import { NurseActions } from '../actions/';


export interface NurseState {
  nurse: Nurse;
}

export const initialState: NurseState = {
  nurse: undefined,
};

const nurseReducer = createReducer(
  initialState,
  on(NurseActions.loadNurses, (state) => (state)),
  on(NurseActions.loadNursesComplete, (state, {nurse}) => {
   return ({ ...state, nurse: nurse });
  }

));

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

The effects file:

import { createEffect, ofType, Actions } from '@ngrx/effects';
import { NurseActions } from '../actions/';
import { switchMap, map, mergeMap } from 'rxjs/operators';
import { Nurse } from '../../shared/models/nurse.model';
import { of } from 'rxjs';
import { NursesService } from '../../shared/services/nurses/nurses.service';
import { AngularFirestoreCollection, AngularFirestore } from '@angular/fire/firestore';
@Injectable()
export class AppEffects {
  private itemsCollection: AngularFirestoreCollection<any>;

  loadNurses$ = createEffect(() => this.actions$.pipe(
    ofType<any>(NurseActions.loadNurses),
    switchMap(() => {
      return this.nursesService.getAllNurses().pipe(
        map((nurse) => {console.log(nurse); return NurseActions.loadNursesComplete({ nurse }); })
      );
    })
  ));


  constructor(private actions$: Actions,
              private nursesService: NursesService,
              private angularFireStore: AngularFirestore) {}
}

I get the error:

ERROR in projects/carer-admin/src/app/state/reducers/nurse.reducer.ts(18,39): error TS2345: Argument of type '(state: NurseState, { nurse }: { nurse: Nurse[]; } & TypedAction<"[NurseState] Nurses Loaded"> & { type: "[NurseState] Nurses Loaded"; }) => { nurse: Nurse[]; }' is not assignable to parameter of type 'OnReducer<NurseState, [ActionCreator<"[NurseState] Nurses Loaded", (props: { nurse: Nurse[]; }) => { nurse: Nurse[]; } & TypedAction<"[NurseState] Nurses Loaded">>]>'.
      Type '{ nurse: Nurse[]; }' is not assignable to type 'NurseState'.
        Types of property 'nurse' are incompatible.
          Type 'Nurse[]' has no properties in common with type 'Nurse'.

Answer 1

Your state expects a nurse object but you are trying to assign a nurse object array. Change your Interface to:

   export interface NurseState {
      nurse: Nurse[];
   }