点击Add to Basket按钮时出现reducer is not a function错误求助

问题场景 #

构建亚马逊克隆项目时，点击「Add to Basket」按钮触发dispatch操作时，抛出**"reducer is not a function"**错误，无法将商品数据存入store，也无法打印预期的props信息。

核心原因 #

这个错误本质是useReducer钩子接收到的第一个参数不是合法函数。结合你的代码，最可能的触发场景是：

• 根组件中使用StateProvider时，未正确传入reducer参数，或传入的reducer不是预期函数（比如传成initialState、undefined，或拼写错误）
• reducer的导入方式错误，导致拿到的不是目标函数

修复步骤 #

1. 检查根组件的StateProvider配置 #

确保在App.js（或项目根组件）中，正确导入并传递reducer和initialState：

// App.js 示例代码
import React from 'react';
import { StateProvider } from './StateProvider';
// 注意：reducer是默认导出，initialState是命名导出
import reducer, { initialState } from './reducer';
import Product from './Product';

function App() {
  return (
    // 必须明确传递initialState和reducer两个props
    <StateProvider initialState={initialState} reducer={reducer}>
      <div className="app">
        <Product 
          id="12345"
          title="示例商品"
          image="https://example.com/product.jpg"
          price={29.99}
          rating={4}
        />
      </div>
    </StateProvider>
  );
}

export default App;

2. 确认reducer文件的导出逻辑 #

你的reducer代码导出逻辑是正确的：默认导出了reducer函数，命名导出了initialState。确保导入时没有混淆两种导出方式，比如不要写成import { reducer } from './reducer'（这会导致拿到undefined）。

3. 排查props拼写错误 #

检查StateProvider的props名称是否拼写正确，比如是否把reducer写成reduer、reducers等笔误。

验证修复 #

完成上述检查后，重新运行项目：

• 点击「Add to Basket」按钮，控制台会打印action对象
• 通过useStateValue获取的basket数组会新增对应的商品项

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