无法使用 TypeScript 声明初始 ReduxToolkit 切片状态答案

【问题标题】：Can't declare initial ReduxToolkit slice state with TypeScript无法使用 TypeScript 声明初始 ReduxToolkit 切片状态
【发布时间】：2022-12-09 22:54:54
【问题描述】：

有一个官方文档，我按照它使用 TS 创建切片 -> RTK usage with TS，它描述了我们如何为我们的状态提供类型。

但是当你这样做时，我的 reducer 出现了问题，他们希望我的状态只包含状态键，而不包含数据。

我在这里错过了什么？有一个demo，可以看到问题所在。

【问题讨论】：

标签： reactjs typescript redux redux-toolkit

【解决方案1】：

基本上，错误表明 state.data 不存在于 SliceState 的第一种可能性。

如果你想让data可用，你可以这样做

type SliceState =
  | { state: "loading"; data: undefined }
  | { state: "finished"; data: string };
const initialState: SliceState = { state: "loading", data: undefined };

这是你的codeSandbox的一个分支。

但是，我认为像这样输入 SliceState 不是一个好主意，您应该输入它

type SliceState = { state: "loading" | "finished"; data?: string };

const initialState: SliceState = { state: "loading" };

const testSlice = createSlice({
  name: "test1",
  initialState, // type SliceState is inferred for the state of the slice
  reducers: {
    changeState: (state, action) => {
      state.data = action.payload;
    }
  }
});

在您的应用程序中，确保在您使用它时定义了 data，而不是或依赖于 status 属性。

【讨论】：