在ngxs中重置状态

Posted 2023-02-19

【中文标题】在ngxs中重置状态

【英文标题】：Resetting state in ngxs

【发布时间】：2018-11-18 01:33:55

【问题描述】：

当我向我的状态添加一些新数据时，新数据不会出现在我的日志或 DevTool Ui 中。

是否有一种机制可以重置状态，以便数据出现。似乎某些缓存中的旧数据仍在显示。

谢谢

【问题讨论】：

请提供详细信息（例如示例代码）来描述您所做的事情？

【参考方案1】：

在 v3.1 中，商店中有一个 reset 函数，可让您重置状态，请参阅文档 here

【参考方案2】：

我更喜欢使用这个重置插件； https://github.com/ng-turkey/ngxs-reset-plugin

这是一个 ngxs 插件，易于实现。

【参考方案3】：

对于状态重置，我尝试通过插件 (https://ngxs.gitbook.io/ngxs/advanced/meta-reducers) 使用“meta-reducer”概念，但我无法将每个切片的状态重新初始化为默认值。

【参考方案4】：

您可以简单地将操作添加到您的app.state.ts 文件中，如下所示

重置状态的动作

@Action(ResetAppState)
resetState(ctx: StateContext<AppStateModel>): Observable<AppStateModel> 
   return of(ctx.getState()).pipe(
      map(currentState => 
         ctx.patchState(/* enter initial/reset values here */);
         return currentState;
      )
   );

您还必须将操作添加到app.action.ts 文件中

export class ResetAppState 
  static readonly type = '[AppState] Reset App State';

现在您可以轻松地在 service 或 component 中分派操作以重置 NGXS 状态，如下所示：

constructor(private store: Store) 

yourMethod(): void 
    this.store.dispatch(new ResetAppState());