通过 Redux Toolkit 中的 createSlice 将 State 与 HTMLElement 结合使用

Question

当尝试创建一个状态包含 HTMLDivElement（或任何其他 HTMLElement 衍生物）类型键的缩减器时，我得到一个 Argument of type '...' is not assignable to parameter of type 似乎是 HTMLElement 的所有键。

interface ITestEvent {
  name: string;
  id: string;
  ref: HTMLDivElement;
}

interface AddEventPayload {
  event: ITestEvent;
}

interface TestEventState {
  events: ITestEvent[];
}

const initialState: TestEventState = {
  events: [],
};

const testSlice = createSlice({
  name: 'test',
  initialState,
  reducers: {
    addEvent(state, action: PayloadAction<AddEventPayload>) {
      state.events.push(action.payload.event); // Error here
    },
  },
});

下面是一个 typescript playground link 说明了这个问题。

https://typescriptlang.org/play link here

通过 createReducer 创建减速器时也会发生同样的情况。

这是 TypeScript 在某些方面的限制 way/is 这是预期的吗？

Answer 1

这看起来是 immer 类型 Draft 的问题。

Draft<typeof initialState> 似乎与原始 Event 类型略有不同。

但一般来说，不建议这样做，并且可能还会导致运行时问题，甚至可能导致 redux devtools 在尝试显示该事件时崩溃。

只建议将可序列化的普通对象放入状态： https://redux.js.org/style-guide/style-guide/#do-not-put-non-serializable-values-in-state-or-actions

通过 Redux Toolkit 中的 createSlice 将 State 与 HTMLElement 结合使用

Using State with HTMLElement with createSlice from Redux Toolkit

redux-toolkit