Question

我将@ngrx/store更新为最新版本8.5.2.

我需要从我的API获取数据列表。

现在我创建了action

import { createAction, props } from "@ngrx/store";
import { IListAll } from "./../../list.model";

export const loadLists = createAction("[List] Load Lists");

export const loadListsSuccess = createAction(
  "[List] Load Lists Success",
  props<{ list: IListAll [] }>()
);

export const loadListsFailure = createAction(
  "[List] Load ListFailure",
  props<{ error: any }>()
);

这里是reducer

import { Action, createReducer, on } from "@ngrx/store";
import { IListAll } from "../../list.model";
import * as Listfrom "../actions/list.actions";

export const list= "list";

export interface State {
  listAll: IListAll [] | null;
}

export const initialState: State = {
  listAll: []
};

const listReducer = createReducer(
  initialState,
  on(SiteActions.loadLists, state => ({ ...state }))
);

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

但是当我尝试在effect中设置所有内容

import { Injectable } from "@angular/core";
import { Actions, createEffect, ofType } from "@ngrx/effects";
import * as listActions from "../actions/list.actions";
import { concatMap, switchMap } from "rxjs/operators";
import { ListService } from "./../../list.service";
import { IListAll } from "./../../list.model";
import { ListFeatureKey } from './../reducers/list.reducer';

@Injectable()
export class ListEffects {
  loadLists$ = createEffect(() =>
    this.actions$.pipe(
      ofType(listActions.loadLists), 
      concatMap(() =>
      this.listService.getLists().pipe(
          map((users: SponsorModel[]) => new actions.LoadSponsorsSuccess(users))
        )
      )
  );

  constructor(private actions$: Actions, listService: ListService) {}
}

这是我的service

 getLists(): Observable<IListAll[]> {
    return this.httpClient.get<IListAll[]>(
      environment.BASE_URL + this.API_SITE + "all"
    );
  }

我收到此错误

不能将类型“可观察的”分配给类型“可观察的”。（（... args：any []）=>可观察）'。类型“可观察”不能分配给类型“可观察”。属性“ type”在类型“ {}”中缺失，但在类型为Action时必需。ts（2322）

我知道效果应该总是在最后ngrx返回一个动作，但我不知道在您的情况下该如何做

此外，将createEffect(() =>注释掉也可以，但这不是可行的解决方案。

在此更新之前，我将“ OLD” @ngrx方法用于动作/减少器和效果，并且一切正常，现在，我想按照上一个版本规则转换所有内容...

Answer 1

问题在map函数内：

  map((users: SponsorModel[]) => new actions.LoadSponsorsSuccess(users))

从版本8开始，NgRx使用ActionCreators代替类。动作创建者返回函数，而不是类，因此您不需要更新动作实例。更改为：

  map((users: SponsorModel[]) => actions.LoadSponsorsSuccess(users))

我在how NgRx Action Creators work上写了一篇博客文章。它提供了有关动作创建者内部构造块的信息。

Answer 2

在方法周围添加from运算符：

import { from } from 'rxjs';

from(
  this.listService.getLists().pipe(
    map((users: SponsorModel[]) => new actions.LoadSponsorsSuccess(users)))
  )
)

无法将新版本的@ngrx效果分配给'Observable <Action>类型

2 个答案: