Why do a set not trigger a store change?

Question

My store is like this

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

I have the following action :

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

And the action trigger this reducer

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]),
  };
};

The action is dispatched correctly, The log is fine, it display what I want.

But in the redux inspector, I see that there is no change in the state. But it should actually change, since instead of having an empty Set, I should have a set with some value (like the console.log display)

why ?

EDIT 1:

I tried a simple :

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

but

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

does not

EDIT 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])
  };
};

Even this, the log is correct with a selectedModelsId: Set(1) {3}, but in redux there is (states are equal)

EDIT 3 :

I changed everything to array, now it works... but why wouldn't it work with a set ?

Answer 1

A Set is not serializable, so it will not be read correctly by the devtools. An array is serializable, and the devtools can read the values.