I am facing a challenge in my Angular application where I need to initialize three properties on the state of the reducer before calling a dispatch that triggers an effect to load data from the server. However, when I debug the effect, the data returned is null indicating that the values haven't been set yet.
I understand that I should subscribe to the state changes and react accordingly, but I'm struggling to figure out how to properly sequence the assignment of these three state properties followed by the dispatch to load data from the server using NgRx. Below is a snippet of the code I'm working with:
Inside 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 dispatch triggers an effect that requires data from state.foo, state.bar, and state.baz
// How can I ensure that the assignment of Foo, Bar, and Baz has completed before this call?
this.store.dispatch(actions.load_data_from_server());
Inside the effect being triggered
loadData$ = createEffect(
()=>this.actions$.pipe(
ofType(actions.load_data_from_server),
// selectParameterData returns a composite object of Foo/Bar/Baz.
// Is there a better way to achieve this than what I'm doing currently?
withLatestFrom(this.store$.select(selectors.selectParameterData),
mergeMap([action, data]=>
... Code to fetch data from the server using values from Foo/Bar/Baz ...
The issue lies here as the data is uninitialized.
)
)
I'm open to restructuring the code to address this problem as part of our application's migration to NgRx. Any assistance on how to properly handle initializing multiple state properties before fetching data from the server would be greatly appreciated.
Therefore, how can I ensure that multiple properties are set on the state and only then proceed to load data from the server, ensuring that the loaded data references those properties on the reducer state object?