主页 / 问题 / 1357748
Accepted
Олег Верушкин
Asked:2022-05-06 19:42:47 +0000 UTC2022-05-06 19:42:47 +0000 UTC

Redux 工具包中的 ts 错误：“DefaultRootState”类型上不存在属性“main”

  • 772

我使用 React + Redux Toolkit + Typescript。

减速器看起来像这样：

import { createSlice } from '@reduxjs/toolkit';

interface IRootState {
  test: boolean;
}

const initialState: IRootState = {
  test: true,
};

export const mainReducer = createSlice({
  name: 'mainReducer',
  initialState,
  reducers: {
    testSwitcher(state) {
      state.test = !state.test;
    },
  },
});

export const { testSwitcher } = mainReducer.actions;

export default mainReducer.reducer;

商店看起来像这样：

const store = configureStore({
  reducer: {
    main: mainReducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

在组件中导入状态：

const { test } = useSelector((state) => state.main);

结果，typescript 在 state.main 中显示错误：

“DefaultRootState”类型上不存在属性“main”

如何解决？

reactjs

1 个回答

  1. Best Answer

    您需要为状态（创建商店的位置）添加一个类型：

    export type RootState = ReturnType<typeof store.getState>;

    并在选择器中指示状态属于这种类型 - 然后打字稿将知道state有一个对象main：

    const { test } = useSelector((state: RootState) => state.main);

    https://react-redux.js.org/using-react-redux/usage-with-typescript#define-root-state-and-dispatch-types

    • 1

相关问题