如何在NGXS Devtools中对元素过多的数组进行切片处理？

问题出在你直接修改了只读的原状态对象，NGXS传递给stateSanitizer的状态是不可修改的，必须返回一个新的状态对象来替代。以下两种方案可以解决你的问题：

方案一：完全隐藏大数组 #

如果不需要在Devtools中查看该数组，直接创建一个排除该数组属性的新状态对象：

NgxsReduxDevtoolsPluginModule.forRoot({
  disabled: false,
  stateSanitizer: (state) => {
    // 解构原状态，剔除大数组属性，返回剩余部分
    const { yourLargeArrayKey, ...sanitizedState } = state;
    return sanitizedState;
  }
})

把yourLargeArrayKey替换成你state中那个大数组的实际属性名。

方案二：展示数组的部分内容 #

如果需要保留部分数组内容用于调试，通过复制原状态并替换数组为切片后的版本：

NgxsReduxDevtoolsPluginModule.forRoot({
  disabled: false,
  stateSanitizer: (state) => {
    // 复制原状态所有属性，将大数组替换为前50个元素（可自行调整数量）
    return {
      ...state,
      yourLargeArrayKey: state.yourLargeArrayKey?.slice(0, 50) || []
    };
  }
})

如果数组位于嵌套对象中（比如state.someNestedObj.largeArray），需要深层复制嵌套对象：

stateSanitizer: (state) => {
  return {
    ...state,
    someNestedObj: {
      ...state.someNestedObj,
      largeArray: state.someNestedObj.largeArray?.slice(0, 50) || []
    }
  };
}

核心原理 #

stateSanitizer的作用是返回一个经过处理的新状态对象，而不是修改传入的原状态。原状态被标记为只读是NGXS的设计，避免意外修改应用的真实状态。

内容的提问来源于stack exchange，提问作者Invader