NGRX - 每次效果后运行功能答案

【问题标题】：NGRX - Run Function After Every EffectNGRX - 每次效果后运行功能
【发布时间】：2019-02-25 22:03:50
【问题描述】：

是否有可能对 NGRX 效果有某种“回调函数”或观察者？用例是，我试图在浏览器刷新期间保持状态。我想在每个效果运行后调用我的缓存服务来保存应用程序状态。目前，我正在通过将其添加到每个效果来做到这一点：

tap(() => setTimeout(() => this.cacheService.saveAppState()))

感觉应该有更好的方法来做到这一点？

【问题讨论】：

标签： angular typescript rxjs ngrx ngrx-effects

【解决方案1】：

是的，有更好的方法。您可以在效果类上实现OnRunEffects。例如：

@Injectable()
export class OrderStoreEffects implements OnRunEffects {
  // Resolves to either QueryCompleted or QueryFailed
  @Effect()
  queryOrdersFromProduct$: Observable<Action> = this.actions$.pipe(...);

  // Resolves to either QueryCompleted or QueryFailed
  @Effect()
  queryOrdersFromWorkCenter$: Observable<Action> = this.actions$.pipe(...);

  constructor(...) {}

  ngrxOnRunEffects(resolvedEffects$: Observable<EffectNotification>) {
    return resolvedEffects$.pipe(tap(effect => console.log({ effect })));
  }
}

resolvedEffects$ observable每次在OrderStoreEffects 类中的效果被执行和解析时发出。

发出的值如下所示：

这为您提供了应用过滤器或其他逻辑的更多可能性。

有关OnRunEffects接口的更多信息，请查看the docs

【讨论】：

这不是针对初始效果解析和订阅存储，而不是针对每个进入效果的操作吗？
我没听懂你的问题，你能改写一下吗？
我认为这用于控制何时将@Effect 添加到管道中。所以，注册、解决并订阅了商店。并非每次跑步都是对行动的反应。
哦，明白了。不，我实际上提到了这一点，因为它与 OP 用例有关。
谢谢，我找了一上午也没找到这个方法！

【解决方案2】：

你不需要任何特别的东西。用你展示的函数编写单独的效果，只是不要在其中过滤动作类型，而是直接去：

this.$actions.pipe(/* your logic here */)

这样所有操作都会运行。

现在您可以使用withLatestFrom 获取当前状态并使用它做任何您需要的事情。

[更新]

这是我不会在效果中实现但在canDeactivate 路由器守卫中实现的东西。

【讨论】：

这将在每个动作上执行，这是不可取的。
动作正在调用每一个效果。您可以通过对每个操作执行此操作来达到效果。
是的 - 但我不希望这种特定效果在每个动作上都运行。在没有过滤的情况下对操作进行管道处理会在每个不必要的操作上触发此函数调用，并且可能会影响性能

【解决方案3】：

你可以订阅你的效果例如：

this.store.dispatch(
        new YourActionEffect()
      );

 this.yourEffects.yourfunction.subscribe(
  (
    action:
      | yourActions.action1
      | yourActions.action2
  ) => {
    if (action === YourActionTypes.ACTION1) {
      //when action1 is fire
    }
    else {
      //when action2 is fire
    }
  }

【讨论】：

【解决方案4】：

我认为你最好使用效果。

您真正需要的是每次商店更新后都会收到警告的钩子。这可以通过 meta reducer 进行管理。

希望已经有一个库可以为您处理所有这些！

看这里https://github.com/btroncone/ngrx-store-localstorage

【讨论】：