如何派发具有当前状态值的动作?
How to dispatch an action with current value of state?
我有一个 angular 组件显示列表中的项目。可以选择每个项目,并且所选项目的 id 将存储在状态中。所以我的状态对象看起来像这样 f.e.:
{ items: Item[]; selected: string[] }
现在我得到一个名为 DeleteSelectedAction
的操作,它获取 selected
作为负载。此操作将使用效果等调用一些 WebAPI。
现在我找到了两种方法。
首先: Select 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 运算符得到类似的东西?
即使该操作没有副作用,您的第二种方法应该也能正常工作。使用 @Effect
转换动作而不执行副作用是对库的完全合法使用。请参阅内容丰富器部分 here。在那种情况下,我肯定会将此操作称为 DELETE_SELECTED
而不仅仅是 DELETE
。
我们使用的是
store.select(fromItems.getSelected).take(1).subscribe(ids =>
store.dispatch(new itemActions.DeleteSelectedAction(ids))
是的,您也可以将它分配给一个字段,而不是在订阅中分派它,...但这是我发现对我们来说非常有效的最短方式。
我有一个 angular 组件显示列表中的项目。可以选择每个项目,并且所选项目的 id 将存储在状态中。所以我的状态对象看起来像这样 f.e.:
{ items: Item[]; selected: string[] }
现在我得到一个名为 DeleteSelectedAction
的操作,它获取 selected
作为负载。此操作将使用效果等调用一些 WebAPI。
现在我找到了两种方法。
首先: Select 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 运算符得到类似的东西?
即使该操作没有副作用,您的第二种方法应该也能正常工作。使用 @Effect
转换动作而不执行副作用是对库的完全合法使用。请参阅内容丰富器部分 here。在那种情况下,我肯定会将此操作称为 DELETE_SELECTED
而不仅仅是 DELETE
。
我们使用的是
store.select(fromItems.getSelected).take(1).subscribe(ids =>
store.dispatch(new itemActions.DeleteSelectedAction(ids))
是的,您也可以将它分配给一个字段,而不是在订阅中分派它,...但这是我发现对我们来说非常有效的最短方式。