Redux配置多reducer时触发products.map is not a function报错

报错Uncaught TypeError: products.map is not a function的核心原因是调用.map()的目标值不是数组，本质是Redux状态路径读取错误，和新增reducer本身没有关系：

• 当你直接把单个reducer传给configureStore的reducer字段时，Redux不会做状态分片，整个store的根state就是该reducer返回的状态，此时你写的读取逻辑刚好能拿到商品数组，功能正常。
• 当你把reducer以对象结构传入配置（哪怕对象里只有一个reducer），Redux会自动调用combineReducers做状态分片，每个对象key对应一个独立的状态子树。此时你原来的读取逻辑拿到的是整个productSlice的状态对象（也就是你控制台打印出来的{products: Array(0), loading: false, error: ''}），不是内部存储商品列表的数组，对普通对象调用数组方法.map()就会触发报错。

• ProductList.jsx中状态读取和渲染逻辑不匹配：你已经通过products.loading判断加载态，说明知道拿到的是带loading字段的状态对象，但渲染时直接对这个对象调用.map()，没有取对象内部真正存商品列表的products数组字段。
• ProductDetails.jsx中状态读取路径错误：store里商品详情reducer的挂载key是productDetails，但代码里写的是state.product，根本读不到对应状态。
• 两个页面组件末尾都重复写了两次export default语句，会触发不必要的语法警告。
• 两个异步thunk的rejected回调中，直接取action.payload拿错误信息的写法不对，未做自定义错误配置时，错误信息存在action.error.message中，会导致错误状态存不到有效内容。

1. 修正ProductList.jsx的状态读取和渲染逻辑 #

调整useSelector的取值，解构出需要的字段，渲染时对真正的商品数组调用map：

const ProductList = () => {
  // 修正状态读取，拿到products分片后解构对应字段
  const { loading, products, error } = useSelector((state) => state.products);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getProducts());
  }, []);
  return (
    <div>
      <Banner />
      <Navbar />
      {loading ? (
        <Loader />
      ) : (
        <div className="container">
          <div className="filters"></div>
          <div className="products">
            <div className="list">
              {/* 这里直接对解构出来的products数组调用map，不要对整个状态对象调用 */}
              {products.map((product) => (
                <Product
                  key={product._id}
                  name={product.name}
                  price={product.price}
                  seller={product.seller}
                  images={product.images}
                  id={product._id}
                />
              ))}
            </div>
          </div>
        </div>
      )}
      <Footer />
    </div>
  );
};
// 删掉重复的export default语句，只保留一次导出
export default ProductList

2. 修正ProductDetails.jsx的状态读取路径 #

对应store里的挂载key调整读取路径：

const ProductDetails = ({ match }) => {
  // 修正路径，读取productDetails分片下的内容
  const { loading, productDetail, error } = useSelector((state) => state.productDetails);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getProductDetails(match.params.id));
  }, [match.params.id]); // 把id加到依赖数组里，id变化时重新拉取详情

  let price = 279.95;
  return (
    <div>
      
    </div>
  );
};
// 删掉重复的export default语句
export default ProductDetails

3. 可选：修正Slice里的错误处理逻辑 #

把两个thunk的rejected回调调整为正确的错误取值方式：

[getProducts.rejected]: (state, action) => {
  state.loading = false;
  state.error = action.error.message;
},
// 商品详情的rejected逻辑同理
[getProductDetails.rejected]: (state, action) => {
  state.loading = false;
  state.error = action.error.message;
},

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