I am using ngrx/store, ngrx/effects, and ngrx/router.
My effects are like this:
@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 }));
In the beginning, the store state is like this:
{
company: { name: 'Google' },
products: {},
workers: {}
}
1) After running this.store.dispatch({ type: LOAD_ONE_PRODUCT });, it becomes like this:
{
company: { name: 'Google' },
products: {
oneProduct: {
label: 'Phone'
}
},
workers: {}
}
2) After running this.store.dispatch({ type: LOAD_ONE_WORKER });, it becomes like this:
{
company: { name: 'Google' },
products: {
oneProduct: {
label: 'Phone'
}
},
workers: {
oneWorker: {
name: 'Tom'
}
},
}
3) Next when I go to another PAGE,
{{store|async|json}}
ngOnInit()
{
this.subscription = this.store
.select(x => x.products && x.products.oneProduct)
.subscribe(oneProduct => {
// Got undefined here. I suppose I can get the latest value from the store
console.log(oneProduct);
});
// Everything will become correct if I `dispatch` any action
// And I created a action called TEST, no reducer for it, which means won't change store state, also works
}
And now {{store|async|json}} shows:
{
company: { name: 'Google' },
products: {},
workers: {}
}
All my states goes back to the initial state. Not only products disappears, but also workers disappears. (NOTE: workers also disappears.)
(However, in Chrome Extention Redux Tools, the state tree shows correct all the time.)
If I add a button and manually use ChangeDetectorRef, do this._cdRef.detectChanges();, {{store|async|json}} still shows initial state. (So seems not related with zone)
However, if I dispatch some actions after, both products and workers will come back to the state. And {{store|async|json}} shows correctly too.
Since in Chrome Extention Redux Tools, the state tree shows correct all the time. So I guess it just does not load correctly. My question is when the page changes, what can trigger loading all store states? Thanks