初始化状态中的属性后如何执行动作/效果?

Question

我有一个组件存储，该组件在每个新组件声明中都是新的。ngOnInit我需要在化简器的状态上设置三个属性的值。 执行后，我需要调用另一个调度，该调度会触发从我的服务器加载数据的效果。

具体而言，效果加载的数据必须引用在 state 中初始化的前三个状态属性。 但是，当我在效果中设置断点时，数据为 null，这告诉我设置值的调度调用尚未完成。

我知道您应该订阅保存到存储中的数据，然后对其进行反应。也许这就是我需要做的，但我无法弄清楚如何菊花链分配三个状态属性的分配，然后调用启动数据加载 NgRx 效果的调度。 这是我正在尝试执行的一些伪代码。

从内部 ngOnInit

this.store.dispatch(actions.set_foo({ value: "A"}))
this.store.dispatch(actions.set_bar({ value: "B"}))
this.store.dispatch(actions.set_baz({ value: "C"}))
//This will call an effect.  The effect needs the data stored in state.foo, state.bar and state.baz
//How do I change this call so that it waits/subscribes to the assignment of Foo, Bar & Baz?
this.store.dispatch(actions.load_data_from_server());

从被调用的效果内部

loadData$ = createEffect(
()=>this.actions$.pipe(
ofType(actions.load_data_from_server),
//selectParameterData is a selector that returns a composite object of Foo/Bar/Baz. There might be a better way to do this, but this allowed me to get three state properties in one.
withLatestFrom(this.store$.select(selectors.selectParameterData),
mergeMap([action, data]=>

... Code that makes a data ball to the server, passing in values from Foo/Bar/Baz ...
This the place where the data is uninitialized.   
)
)

请注意，我可以重组所有这些代码，但应该正确完成。 我们的团队已经决定我们需要将我们的 Angular 应用程序迁移到 NgRx，这些是我需要解决的问题，设置了一个将部分应用程序迁移到 NgRx 的示例。 感谢您的任何帮助。

因此，这显然是一个问题，如何在我的状态上设置多个属性，并且只有在分配它们之后，才从服务器加载数据，在我的化简器状态对象上引用这些属性？

Answer 1

您可以像这样链接操作处理程序：

从内部 ngOnInit

this.store.dispatch(actions.set_all({ a: "A", b: "B", c: "C"} ));

从被调用的效果内部

setAll$ = createEffect(
() =>  this.actions$.pipe(
ofType(actions.set_all),
concatMap(t => {
return [
actions.set_foo({ value: t.a} ),
actions.set_bar({ value: t.b} ),
actions.set_baz({ value: t.c} ),
actions.load_data_from_server
];
})
)
loadData$ = createEffect(
()=>this.actions$.pipe(
ofType(actions.load_data_from_server),
//selectParameterData is a selector that returns a composite object of Foo/Bar/Baz. There might be a better way to do this, but this allowed me to get three state properties in one.
withLatestFrom(this.store$.select(selectors.selectParameterData),
mergeMap([action, data]=>

... Code that makes a data ball to the server, passing in values from Foo/Bar/Baz ...
data is now initialized.   
)
)

替代解决方案

或者使用带有setTimeout的异步调度程序来调度调度，这将触发事件循环下一个周期中的最后一个调度。警告：这将再次触发更改检测(与以前的解决方案相比)。

this.store.dispatch(actions.set_foo({ value: "A"} ))
this.store.dispatch(actions.set_bar({ value: "B"}))
this.store.dispatch(actions.set_baz( { value: "C" }))
setTimeout(() => {
this.store.dispatch(actions.load_data_from_server());
});