1

我有一个角度组件显示列表中的项目。每个 itemn 都可以被选中，并且选中的 item 的 id 将被存储在 state 中。所以我的状态对象看起来像这样：

{ 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 运算符得到类似的东西？

4

2 回答 2

2

即使该操作没有副作用，您的第二种方法也应该可以正常工作。使用 an@Effect来转换操作而不执行副作用是对库的完全合法使用。请参阅此处的内容丰富器部分。在那种情况下，我肯定会把这个动作称为类似的东西，DELETE_SELECTED而不仅仅是DELETE.

于 2017-07-14T17:43:00.303 回答
1

我们使用的是

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

是的，您也可以将它分配给一个字段，而不是在 subscribe 中调度它，......但这是我发现对我们非常有效的最短方法。

于 2017-07-20T16:39:24.843 回答