如何使用当前状态值调度操作?

时间:2017-07-14 16:48:43

标签: angular redux rxjs ngrx ngrx-store

我有一个角度组件显示列表中的项目。可以选择每个项目,并且所选项目的ID将存储在该状态中。所以我的状态对象看起来像这样:

{ items: Item[]; selected: string[] }

现在我得到了一个名为DeleteSelectedAction的动作,它将selected作为有效载荷。此操作将使用效果调用某些WebAPI等。

现在我找到了两种方法来实现这一目标。

首先:从商店中选择selected并订阅它并通过操作传递值

store.select(fromItems.getSelected).subscribe(ids => {
    this.selected = ids; 
});
...
store.dispatch(new itemActions.DeleteSelectedAction(this.selected);

第二次:不将任何值传递给操作,但获取有效的selected

store.dispatch(new itemActions.DeleteSelectedAction());

// in effect
@Effect()
delete$: Observable<Action> = this.actions$
  .ofType(fromItems.DELETE)
  .withLatestFrom(this.store.select(fromItems.getSelected)
  .switchMap([action, selected] => {
    return this.service.delete(selected)
      .map(new itemActions.DeleteSuccessAction())
      .catch(err => Observable.of(new itemActions.DeleteFailAction(err));
  });

我不喜欢第一种方式,因为我需要使用订阅并需要正确取消订阅。第二种方法是好的,但只有当动作有副作用时。 所以现在我正在寻找第三种方式。在我看来,这种方式如下:

store.dispatchWithLatestFrom(
  fromItems.getSelected,
  (selected) => new itemActions.DeleteSelectedAction(selected));

我怎么能用rxjs运算符得到类似的东西?

2 个答案:

答案 0 :(得分:1)

即使动作没有副作用,你的第二种方法应该可以正常工作。使用@Effect转换动作而不执行副作用是对库的完全合法使用。请参阅内容加密人here部分。在这种情况下,我肯定会将此操作称为DELETE_SELECTED,而不仅仅是DELETE

答案 1 :(得分:1)

我们正在使用的是

store.select(fromItems.getSelected).take(1).subscribe(ids => 
    store.dispatch(new itemActions.DeleteSelectedAction(ids))

是的,而不是在订阅中发送它,你也可以将它分配到一个字段,...但这是我发现为我们工作的最短路。