如何在我的状态中的属性初始化后执行 Action/Effect？

Question

我有一个组件商店，每个新组件声明都是新组件。在 ngOnInit 中，我需要设置减速器状态的三个属性的值。执行后，我需要调用另一个调度来触发从我的服务器加载数据的效果。

具体来说，effect加载的数据需要引用state中初始化的前面三个state属性。但是，当我在效果中设置断点时，数据为空，这告诉我设置值的调度调用尚未完成。

我知道您应该订阅保存在商店中的数据，然后对其做出反应。也许这就是我需要做的，但我无法弄清楚如何菊花链分配三个状态属性，然后调用启动数据加载 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 的示例。感谢您的帮助。

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

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());
});

如何在我的状态中的属性初始化后执行 Action/Effect？

How can I execute an Action/Effect after properties in my state are initialized?

rxjs

typescript

ngrx

angular

ngrx-entity