Next.js电商项目Redux购物车报错：Cannot read properties of undefined (reading 'items')

核心问题分析 #

错误提示state.basket是undefined，说明你的Redux Store中basket切片没有被正确注册，或者组件无法获取到Store的状态。

修复步骤 #

1. 修正Store中reducer的导入方式

你的basketSlice.js里用默认导出了reducer：

export default basketSlice.reducer;

但在Store.js中却用了解构导入，这会导致basketReducer为undefined，进而Store无法正确注册basket切片。

修改Store.js的导入代码：

import { configureStore } from "@reduxjs/toolkit";
import basketReducer from "./Slices/basketSlice"; // 去掉花括号，使用默认导入

export const store = configureStore({
  reducer: {
    basket: basketReducer,
  },
});

2. 确保Next.js中正确配置Redux Provider

在pages/_app.js（或app/layout.js，如果你用的是App Router）中，必须用Redux的Provider包裹所有组件，这样子组件才能访问到Store：

Pages Router 示例（_app.js）：

import { Provider } from 'react-redux';
import { store } from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

App Router 示例（app/layout.js）：

'use client';
import { Provider } from 'react-redux';
import { store } from '@/store';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Provider store={store}>
          {children}
        </Provider>
      </body>
    </html>
  );
}

3. 验证组件中状态获取逻辑

确保使用useSelector的组件在Provider的范围内，比如：

import { useSelector } from 'react-redux';
import { selectItems } from '../Slices/basketSlice';

function CartComponent() {
  const cartItems = useSelector(selectItems);
  // 后续渲染逻辑
  return <div>购物车商品数：{cartItems.length}</div>;
}

额外检查点 #

• 确认store文件的路径是否正确，避免因路径错误导致导入失败
• 如果使用App Router，注意在需要访问Redux的组件或布局上添加'use client';指令，因为Redux是客户端状态管理工具

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