Angular 11 NgRx状态管理订阅处理与状态清理最佳实践咨询

方案合理性结论 #

你提出的在ngOnDestroy生命周期中派发重置Action、清除对应状态片段的方案是合理的，属于NgRx状态管理的官方推荐最佳实践之一。

原因说明 #

NgRx Store是全局单例的持久化存储，你在弹窗关闭时执行的取消订阅操作，仅仅是终止了当前组件对状态的监听，不会修改Store中已经存储的状态值。因此弹窗重新打开时，Selector会直接读取到Store中遗留的上一次数据，这是NgRx的正常运行逻辑。

实现建议 #

你可以按照以下步骤实现该逻辑：

• 先定义专属的重置Action，示例：

  export const resetUserInformation = createAction('[User] Reset User Information');
  

• 在对应的Reducer中匹配该Action，将对应状态字段重置为初始值（你的场景中重置为null即可）：

  on(UserActions.resetUserInformation, (state) => ({
    ...state,
    userInformation: null
  }))
  

• 在弹窗组件的ngOnDestroy中派发该Action：

  ngOnDestroy(): void {
    this.getUserInformation$?.unsubscribe();
    this.store.dispatch(UserActions.resetUserInformation());
  }
  

额外优化建议 #

如果该用户信息状态仅在当前弹窗场景使用，还可以做两点优化：

• 替换手动订阅为Angular async管道，不需要手动管理订阅销毁，降低内存泄漏风险
• 如果该状态完全不需要全局共享，也可以采用NgRx Component Store做组件级状态管理，不需要手动处理状态重置的逻辑，生命周期和组件完全绑定。

内容的提问来源于stack exchange，提问作者Ibrahim S. Gerbiqi