使用React-Redux与Redux Toolkit实现模态框报错：Cannot read properties of undefined

错误原因 #

你在store.jsx中错误地将整个editQuoteModalSlice对象作为reducer传入了store配置，而Redux的reducer字段需要的是reducer函数（即slice对象的reducer属性）。这导致Redux store中没有正确初始化editQuoteModalSlice这个状态节点，所以当selector尝试访问state.editQuoteModalSlice.editQuoteModalShown时，state.editQuoteModalSlice是undefined，进而触发报错。

修复方案 #

有两种可行的修复方式：

方式1：导入slice的默认导出（reducer函数） #

修改store.jsx的导入语句，导入slice默认导出的reducer，并在store配置中使用它：

// store.jsx
import { apiSlice } from "./api/apiSlice";
// 导入默认导出的reducer
import editQuoteModalReducer from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    // 使用导入的reducer函数，键名保持和selector一致
    editQuoteModalSlice: editQuoteModalReducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

setupListeners(store.dispatch);

方式2：使用slice对象的reducer属性 #

如果保持导入命名的slice对象，在store配置中明确指定使用它的reducer属性：

// store.jsx
import { apiSlice } from "./api/apiSlice";
import { editQuoteModalSlice } from "../features/quotes/editQuoteModalSlice";

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
    // 访问slice对象的reducer属性
    editQuoteModalSlice: editQuoteModalSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
  devTools: true,
});

setupListeners(store.dispatch);

验证 #

修复后，Redux store会正确初始化editQuoteModalSlice状态节点，editQuoteModalShownSelector就能正常访问到editQuoteModalShown属性，组件也能正确根据状态渲染模态框。

内容的提问来源于stack exchange，提问作者Nasem