I am currently utilizing ngrx/store, ngrx/effects, and ngrx/router.
The implementation of my effects is structured as follows:
@Effect() loadOneProduct$ = this.updates$
.whenAction(LOAD_ONE_PRODUCT)
.switchMap(() => this.productService.loadOneProduct())
.map(oneProduct => ({ type: LOAD_ONE_PRODUCT_SUCCESS, payload: oneProduct }));
@Effect() loadOneWorker$ = this.updates$
.whenAction(LOAD_ONE_WORKER)
.switchMap(() => this.workerService.loadOneWorker())
.map(oneWorker => ({ type: LOAD_ONE_WORKER_SUCCESS, payload: oneWorker }));
Initially, the state of the store is defined as shown below:
{
company: { name: 'Google' },
products: {},
workers: {}
}
1) Upon executing
this.store.dispatch({ type: LOAD_ONE_PRODUCT });{
company: { name: 'Google' },
products: {
oneProduct: {
label: 'Phone'
}
},
workers: {}
}
2) After triggering
this.store.dispatch({ type: LOAD_ONE_WORKER });{
company: { name: 'Google' },
products: {
oneProduct: {
label: 'Phone'
}
},
workers: {
oneWorker: {
name: 'Tom'
}
},
}
3) Subsequently, upon navigating to another PAGE,
{{store|async|json}}
ngOnInit()
{
this.subscription = this.store
.select(x => x.products && x.products.oneProduct)
.subscribe(oneProduct => {
// "undefined" value received at this point. Expecting to fetch the latest value from the store.
console.log(oneProduct);
});
// All discrepancies are rectified by dispatching any action
// I introduced an action named TEST, which lacks a reducer, indicating no alteration in store state, yet it functions as expected
}
As per the current output of {{store|async|json}}:
{
company: { name: 'Google' },
products: {},
workers: {}
}
All states revert back to their original form. Both products and workers vanish. (NOTE: The disappearance of workers also occurs.)
(Nevertheless, the state tree in Chrome Extension Redux Tools consistently appears correct.)
Even after including a button and manually invoking ChangeDetectorRef with this._cdRef.detectChanges();, {{store|async|json}} continues to display the initial state. (Hence, seemingly not zone-related)
However, following the dispatch of certain actions afterwards, both products and workers resurface in the state. Subsequently, {{store|async|json}} exhibits the correct information.
Since the state tree always displays accurately in Chrome Extension Redux Tools, it suggests that the loading process may be flawed. My query is: what can be done to trigger the retrieval of all store states when navigating between pages? Thank you