时间戳

首页 > 解决方案 > NGRX 操作已调度，但效果未触发

javascript - NGRX 操作已调度，但效果未触发

问题描述

我遇到了一个问题，我的 NGRX 效果没有触发。这是我的动作、reducers、效果和组件代码。

这是我的效果中的代码片段，我只用占位符替换了实体和服务的实际名称。

// entity.effects.ts
createEntity$: Observable<Action> = this.actions$.pipe(
  ofType<CreateEntity>(EntityActionTypes.CreateEntity),
  map(action => {
    console.log("here");
    return action.payload;
  }),
  mergeMap(data => {
    return this.service.createEntity(data).pipe(
      map(data => new CreateEntitySuccess(data)),
      catchError(error => of(new CreateEntityError(error)))
    );
  })
);

entity.actions.ts
import { Action } from "@ngrx/store";

export enum EntityActionTypes {
  CreateEntity = "[Entity API] Create Entity",
  CreateEntitySuccess = "[Entity] Create Entity Success",
  CreateEntityError = "[Entity] Create Entity Error"
}

export class CreateEntity implements Action {
  readonly type = CreateEntityActionTypes.CreateEntity;
  constructor(public payload: any) {}
}

// ... CreateEntitySuccess and CreateEntityError are defined here...

export type EntityActionsUnion =
  | CreateEntity
  | CreateEntitySuccess
  | CreateEntityError;

本质上，我有一个容器，它在表单提交时调度 CreateEntity 操作。但是，我没有看到我写入效果的 console.log()。此外，我对加载从正在工作的 LoadEntities 上的 REST API 发出对所有实体的请求有另一个效果。然而，创建一个新实体的效果不是，我什至不认为它正在触发。

我也没有收到任何错误。这是调度我的操作的代码：

import * as EntityActions from '../actions/entity.actions.ts
createBuilding() {
  const data = this.form.value;
  const image = this.fileUploadComponent.file;
  const payload = {
    data,
    image
  };
  this.store.dispatch(new EntityActions.CreateEntity(payload));
}

我有 Redux 开发工具，我看到调度触发和loading: true返回的新状态。但是，效果没有触发，我的 Success 或 Error 调度也没有触发分辨率。知道为什么会这样吗？

标签： javascriptangularreduxrxjsngrx

解决方案

你装饰过你的效果方法@Effect()吗？这就是我通常想念的:)

推荐阅读