Question

下面是设置状态的reducer和effects文件，该文件从数据库中获取数据，并应使用数据更新状态，该数据是一个数组，但是我无法使用有效负载来更新状态。

Reducer文件：

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);
}

效果文件：

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) {}
}

我得到了错误：

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

您的状态需要一个护士对象，但是您正在尝试分配护士对象数组。将您的界面更改为：

   export interface NurseState {
      nurse: Nurse[];
   }

Answer 2

从this.nursesService.getAllNurses()返回Nurse[]，因此它应该是：

map(nurses => NurseActions.loadNursesComplete({ nurses }))

并且loadNursesComplete应该将Nurse[]作为变量返回{nurses}。

因此，在您的商店中，您将不会存储一位护士，而是会列出一位护士：

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

));

export interface NurseState {
   nurses: Nurse[];
}

您的姓名首字母状态可能为空列表

无法获取有效载荷以填充新状态ngrx 8

2 个答案: