Redux Action分发失败及Checkout中items遍历报错求助

问题1：无法向Redux Store分发Action #

核心原因及修复步骤： #

1. 文件名拼写错误：你的slice文件名为busketSlice.ts（正确拼写应为basketSlice.ts），但Cards.tsx中导入action时使用的路径是../basketSlice，路径不匹配导致无法正确导入addToBasket action。

   • 修复：将slice文件名改为basketSlice.ts，确保所有组件的导入路径与文件名一致。

2. 缺失Redux Provider包裹：如果你的Next.js根组件（_app.tsx）没有用Provider包裹整个应用，Redux Store无法被全局组件访问。

   • 修复：在_app.tsx中添加Provider配置：

     import { Provider } from 'react-redux';
     import { store } from '../store';
     import { SessionProvider } from "next-auth/react"
     
     export default function App({ Component, pageProps: { session, ...pageProps } }) {
       return (
         <SessionProvider session={session}>
           <Provider store={store}>
             <Component {...pageProps} />
           </Provider>
         </SessionProvider>
       )
     }
     

3. 确认dispatch调用逻辑：Cards.tsx中的addItemsToBusket函数逻辑正确，但需确保文件名修复后addToBasket action能正常导入：

   const addItemsToBusket = () => {
     const product = { id, title, image, description, price, category };
     dispatch(addToBasket(product));
   }
   

问题2：Checkout组件遍历渲染时报错TypeError: Cannot read properties of undefined (reading 'image') #

错误原因： #

1. map函数解构错误：checkout.tsx中遍历items时错误解构为{item, i}，但items数组的每个元素本身就是完整的商品对象，不存在嵌套的item属性，导致item为undefined，访问item.image时报错。
2. map函数无返回值：使用大括号{}包裹箭头函数体时未显式return组件，导致渲染结果为undefined。

修复代码： #

将checkout.tsx中的遍历代码修改为：

{items.map((item, i) => (
  <CheckOutProduct 
    key={i}
    id={item.id}
    title={item.title}
    image={item.image}
    description={item.description}
    price={item.price}
    category={item.category}
  />
))}

• 直接用item接收数组元素，无需错误解构
• 使用小括号()包裹返回的组件，自动完成return，无需显式声明
• 传递CheckOutProduct组件定义中所需的全部props，避免后续潜在问题

额外修复： #

busketSlice.ts中的selectTotal选择器存在拼写错误，state.busket.items应改为state.basket.items：

export const selectTotal = (state: any) => state.basket.items.reduce((total:any, item:any) => total + item.price, 0);

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