时间戳

首页 > 解决方案 > 为什么一个集合不触发存储更改？

angular - 为什么一个集合不触发存储更改？

问题描述

我的店铺是这样的

export interface State extends EntityState<featureModels.IModel> {
  selectedModelsId: Set<number>;
  isLoading?: boolean;
  error?: any;
}

我有以下行动：

export class SelectModels implements Action {
  public readonly type = ActionTypes.SelectModels;
  constructor(public payload: {modelsIds: Array<number>}) {}
}

并且动作触发了这个减速器

const SELECT_MODELS = (state: State, action: featureAction.SelectModels) => {
  console.log(new Set([...Array.from(state.selectedModelsId), ...action.payload.modelsIds]));
  return {
    ...state,
    selectedModelsId: new Set([...Array.from(state.selectedModelsId), ...action.payload.modelsIds]),
  };
};

动作被正确调度，日志很好，它显示了我想要的。

但是在 redux 检查器中，我看到状态没有变化。但它实际上应该改变，因为我应该有一个带有一些值的集合而不是一个空集合（如 console.log 显示）

为什么 ？

编辑1：

我尝试了一个简单的：

  return {
    ...state,
    selectedModelsId: 1234,
  };

但

  return {
    ...state,
    selectedModelsId: new Set(3),
  };

才不是

编辑 2：

const SELECT_MODELS = (state: State, action: featureAction.SelectModels) => {
  console.log(new Set([...Array.from(state.selectedModelsId), ...action.payload.modelsIds]));
  console.log({
    ...state,
    selectedModelsId: new Set([...Array.from(state.selectedModelsId), ...action.payload.modelsIds])
  });
  return {
    ...state,
    selectedModelsId: new Set([...Array.from(state.selectedModelsId), ...action.payload.modelsIds])
  };
};

即使这样，日志也是正确的 a selectedModelsId: Set(1) {3}，但在 redux 中有(states are equal)

编辑 3：

我将所有内容都更改为数组，现在它可以工作了......但是为什么它不能与 set 一起工作？

标签： angulartypescriptngrxangular8

解决方案

ASet不可序列化，因此 devtools 无法正确读取它。数组是可序列化的，开发工具可以读取这些值。

推荐阅读