我想根据异步 NGXS 操作的结果执行操作。
在 Angular 前端应用程序中，我使用 NGXS 进行状态管理。某些操作涉及通过 REST 调用与后端通信。这些操作是作为异步操作实现的，我的状态类中的 reducer 函数返回一个 Observable。
我正在寻找一种获取后端调用结果的方法，以便能够执行一些操作。
我尝试实现的一个用例是导航到刚刚创建的对象：业务对象是在前端(Angular(应用程序中创建的，具有几个域属性。它们被保留在后端，因此创建此对象的 ID 并将其返回到前端，并合并到 NGXS 存储中。作为对此的直接回应，我想导航到新对象的详细信息视图。为此，我需要
- (a( 呼叫已成功返回的信息，以及
- (b( 来自后端的答案(在本例中为 ID(。
另一个稍微复杂的用例是将多个标签分配给业务对象。这些标签本身就是实体，每个标签都有一个 ID。在 UI 中，用户可以选取现有标记或添加新标记。无论哪种方式，都可以在 UI 中的一个步骤中添加多个标签，这意味着我必须
- 调用每个新标签的后端以创建 ID
- 创建所有缺少的标签后，使用标签 ID 列表更新业务对象
通常，前端中存在依赖于后端调用结果的用例，并且没有干净的方法可以在存储中找到此结果(尽管它在那里(
我知道我可以订阅从商店的调度方法返回的可观察量(如异步操作所示(。 我也知道动作处理程序。在这两种情况下，我都可以将代码附加到操作完成的事件中，但这两个选项都无法使我获得后端调用的结果。在第一个情况下，可观察量承载整个商店，而在后一种情况下，我得到原始操作，不幸的是缺少基本信息(ID(。
您在此处缺少的部分是选择器。调度操作不应该给你一个结果。store.dispatch()返回的 Observable 的唯一目的是告诉您操作的处理程序何时完成。
若要获取调用后端返回的数据，必须在操作处理程序中修补状态。然后，在您的州之外，您可以使用store.select()或store.selectSnapshot()访问数据，具体取决于您的需要。您的状态类应该看起来像这样(未经测试(：
@State()
export class SampleState {
@Selector(SampleState)
sampleSelector(state) {
return state.sampleObject;
}
@Action(SampleAction)
sampleAction(ctx: StateContext<any>, action: sampleAction) {
return sampleBackendCall(/* ... */).pipe(
tap((result) => {
ctx.patchState({ sampleObject: result });
})
);
}
}
现在，您可以使用Store随时随地访问此结果。对于在元素创建后导航到元素的用例，您可以将订阅store.dispatch()与如下所示的store.selectSnapshot()相结合：
store.dispatch(new SampleAction()).subscribe(() => {
navigateTo(store.selectSnapshot(SampleState.sampleSelector));
});
请注意，在这种简单的情况下，selectSnapshot是完全可以的，因为我们只想将刚刚完成写入状态的值获取。但在大多数情况下，您需要使用store.select()或@Select()装饰器，因为它们返回可观察量，使您能够正确显示状态中的更改。
也就是说，我想补充一点，如果将数据保存在状态中对您来说根本不必要，那么 NGXS 可能首先是错误的库，您也可以使用普通的角度服务直接返回后端调用的结果，如评论中建议的那样。