typescript - 当页面发生变化时,什么可以触发加载所有商店状态?

标签 typescript angular rxjs5 ngrx

我正在使用 ngrx/storengrx/effectsngrx/router

我的效果是这样的:

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

一开始store状态是这样的:

{
  company: { name: 'Google' },
  products: {},
  workers: {}
}

1)运行this.store.dispatch({ type: LOAD_ONE_PRODUCT });后,变成这样:

{
  company: { name: 'Google' },
  products: {
    oneProduct: {
      label: 'Phone'
    } 
  },
  workers: {}
}

2) 运行this.store.dispatch({ type: LOAD_ONE_WORKER });后,变成这样:

{
  company: { name: 'Google' },
  products: {
    oneProduct: {
      label: 'Phone'
    } 
  },
  workers: {
    oneWorker: {
      name: 'Tom'
    } 
  },
}

3) 接下来,当我转到另一个页面时,

{{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
}

现在 {{store|async|json}} 显示:

{
  company: { name: 'Google' },
  products: {},
  workers: {}
}

我所有的状态都回到初始状态。不仅products消失了,workers也消失了。 (注意:workers 也会消失。)

(但是,在 Chrome Extention Redux Tools 中,状态树始终显示正确。)

如果我添加一个按钮并手动使用 ChangeDetectorRef,执行 this._cdRef.detectChanges();{{store|async|json}} 仍然显示初始状态. (所以似乎与区域无关)

但是,如果我在之后发送一些 Action ,productsworkers 都会回到状态。 {{store|async|json}} 也正确显示。

由于在 Chrome Extention Redux Tools 中,状态树始终显示正确。所以我猜它只是没有正确加载。我的问题是当页面发生变化时,什么可以触发加载所有商店状态?谢谢

最佳答案

关于typescript - 当页面发生变化时,什么可以触发加载所有商店状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38084904/

相关文章:

angular - 订阅可观察对象的主体

angular - 如果输入长度小于 3,则禁用按钮

单击路线时 Angular2 应用程序卡住

angular - 无法从 Angular 中 mat-sidenav 内的组件检索路由参数

javascript - 等到下一个其他可观察订阅

javascript - 我如何将 `do` 用作 RxJS 可出租运算符?

typescript - Angular2 使用条件运算符绑定(bind)

javascript - 为什么 array.find() 没有按预期工作?

JavaScript - 如何将多个嵌套数组中的所有对象放入一个新的唯一对象数组中

angular - 选择对象数组内的嵌套对象数组