无法在 redux-toolkit 中调度操作

Question

我正在尝试了解 redux-toolkit。我需要理解为什么

Add All Products

按钮没有将所有产品添加到 redux store 的状态。虽然

add to cart

适用于单个项目。我只想做同样的事情，但想传递参数中的所有

products

。

这是代码：

import { useEffect, useState } from "react";
import React from "react";
import { add } from "./store/cartSlice";
import "./styles.css";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";
const Products = () => {
  const dispatch = useDispatch();
  const [products, setProducts] = useState([]);

  useEffect(() => {
    const fetchUsers = async () => {
      const res = await fetch("https://fakestoreapi.com/products");
      const data = await res.json();
      console.log(data);
      setProducts(data);
      // alert(products);
    };
    fetchUsers();
  }, []);

  const handleAdd = (product) => {
    dispatch(add(product));
  };
  const handleAddAll = (products) => {
    dispatch(add(products));
  };
  const items = useSelector((state) => state.cart);
  return (
    <div className="productsWrapper">
      <button onClick={() => handleAddAll(products)}>Add All Products</button>
      <h1>Products List</h1>
      <h3>Cart Size: {items.length}</h3>
      <h3>View Cart: {items.map((item) => item.title)}</h3>
      {products.map((product) => (
        <div className="card" key={product.id}>
          <h4>{product.title}</h4>
          <img src={product.image} alt={product.title} />
          <h4>Price: {product.price}</h4>
          <button onClick={() => handleAdd(product)}>Add to cart</button>
        </div>
      ))}
    </div>
  );
};

export default Products;

这里是codesandbox的链接：https://codesandbox.io/p/sandbox/redux-toolkit-listed-trxyrx?file=%2Fsrc%2FProducts.js%3A37%2C35

Answer 1

“添加所有产品”按钮未将所有产品添加到 Redux 存储状态的问题与您在 handleAddAll 函数中处理调度的方式有关。目前，您将整个产品数组作为参数传递给dispatch(add(products))。

Redux 操作通常期望单个负载，而不是数组。要单独添加所有产品，您应该映射产品数组并分别为每个产品分派添加操作。

这是修改后的handleAddAll函数：

const handleAddAll = () => {
  products.forEach((product) => {
    dispatch(add(product));
  });
};