11

我正在使用 Angular2 和 ngrx/store 和 ngrx/effects 进行状态管理。

当某个操作失败时，我想显示一条错误消息，但似乎我无法在一个@Effects()块中执行此任务。请参阅以下内容：

  @Effect() selectOfficeFail$ = this.actions$
   .ofType(SelectOfficeActions.LOAD_FAIL)
   .do(() => {
     alert('Error! No offices found!'); // I keep entering here
  });

当上面的代码运行时，警报会无限次运行，直到浏览器崩溃。似乎@Effect() 必须返回一个新的dispatch()，但我不明白为什么。为什么上面的 alert() 会运行无数次？

编辑：我没有SelectOfficeActions.LOAD_FAIL多次派遣。只有一次

4

4 回答 4

19

[更新] 现在最好的方法是使用dispatch这样的选项：

@Effect({dispatch: false}) selectOfficeFail$ = this.actions$
    .ofType(SelectOfficeActions.LOAD_FAIL)
    .do(() => {
        alert('Error! No offices found!'); // I keep entering here
    });

它的意思是“对这个动作做出反应，但不发送另一个”。

于 2017-01-26T13:41:24.463 回答
6

问题是do允许动作流过你的效果，然后动作再次被商店分派。您可以使用filter来防止这种情况发生：

@Effect() selectOfficeFail$ = this.actions$
  .ofType(SelectOfficeActions.LOAD_FAIL)
  .do(() => {
    alert('Error! No offices found!'); // I keep entering here
  })
  .filter(() => false);
于 2016-08-25T12:55:56.553 回答
2

是的，您@effect需要调度一个新操作是正确的，但我认为您的应用程序逻辑有问题。

您不应该SelectOfficeActions.LOAD_FAIL在组件或服务中分派操作，而应该是调用 an 的 LOAD 操作，而效果又会根据条件@Effect分派 a LOAD_COMPLETEor 。LOAD_FAIL

像这个来自图书馆 github 的例子

 @Effect() login$ = this.updates$
      // Listen for the 'LOGIN' action
      .whenAction('LOGIN')
      // Map the payload into JSON to use as the request body
      .map(update => JSON.stringify(update.action.payload))
      .switchMap(payload => this.http.post('/auth', payload)
        // If successful, dispatch success action with result
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
        // If request fails, dispatch failed action
        .catch(() => Observable.of({ type: 'LOGIN_FAILED' }));
      );
于 2016-08-25T12:42:33.007 回答
2

如果使用createEffect函数，则dispatch: false需要将标志作为配置参数传递（ngrx.io 参考）

effectName$ = createEffect(
  () => this.actions$.pipe(
    ofType(FeatureActions.actionOne),
    tap(() => console.log('Action One Dispatched'))
  ),
  { dispatch: false }
  // FeatureActions.actionOne is not dispatched
);
于 2020-05-12T09:26:43.913 回答