REDUX-spread运算符返回与concat方法不同的结果

我正在努力学习使用Redux的正确方法。我看到了很多使用spread运算符的示例，但我对如何使用它感到困惑

例如，在下面的代码中，我有一个非常简单的示例，其中我按顺序启动相同的操作两次，以模拟添加到购物车中的一些产品。 第一个操作添加一个包含两个产品的数组，而第二个操作添加一个产品。 如果我使用concat将产品保存在状态中，我将获得包含三种产品的cart数组的预期结果：

    "use strict"
    import {createStore} from 'redux';

    // REDUCERS
    const reducer = function(state={cart:[]}, action) {
      switch (action.type) {
        case "ADD_TO_CART":

        //HERE I ADD MY NEW ARRAY TO THE EXISTING ARRAY IN TEH STATE
        let cart = [...state.cart].concat(action.payload);
         return   {...state, cart}

          break;

      }
      return state
    }

    // CREATE STORE
    const store = createStore(reducer);

    // SUBSCRIBE
    store.subscribe(function() {
      console.log("current state is", store.getState());

    })

    // ACTIONS
    store.dispatch({
      type: "ADD_TO_CART",
      payload:[ {
        productId: 1,
        name: "Product A",
        price: 33.33
      },
      {
        productId: 2,
        name: "Product B",
        price: 15.00
      }]
    })

    store.dispatch({
      type: "ADD_TO_CART",
      payload:
      [{
        productId: 3,
        name: "Product C",
        price: 40.00
      }]
    })

以下是我预期的结果：

如果我改为使用如下所示的扩展运算符，我会得到一个奇怪的结果，其中Redux创建了两个对象，一个包含两个数组，其中包含从第一个激发动作添加的产品，另一个对象包含第三个数组/产品：

    "use strict"
    import {createStore} from 'redux';

    // REDUCERS
    const reducer = function(state={cart:[]}, action) {
      switch (action.type) {
        case "ADD_TO_CART":

        //HERE I ADD MY NEW ARRAY TO THE EXISTING ARRAY IN TEH STATE
        let cart = [...state.cart].concat(action.payload);
         return   {...state, cart}

          break;

      }
      return state
    }

    // CREATE STORE
    const store = createStore(reducer);

    // SUBSCRIBE
    store.subscribe(function() {
      console.log("current state is", store.getState());

    })

    // ACTIONS
    store.dispatch({
      type: "ADD_TO_CART",
      payload:[ {
        productId: 1,
        name: "Product A",
        price: 33.33
      },
      {
        productId: 2,
        name: "Product B",
        price: 15.00
      }]
    })

    store.dispatch({
      type: "ADD_TO_CART",
      payload:
      [{
        productId: 3,
        name: "Product C",
        price: 40.00
      }]
    })

“严格使用” 从“redux”导入{createStore}

    // REDUCERS
    const reducer = function(state={cart:[]}, action) {
      switch (action.type) {
        case "ADD_TO_CART":

        //HERE I ADD MY NEW ARRAY TO THE EXISTING ARRAY IN TEH STATE
        return   {...state, cart:[...state.cart, action.payload]}

          break;

      }
      return state
    }

    // CREATE STORE
    const store = createStore(reducer);

    // SUBSCRIBE
    store.subscribe(function() {
      console.log("current state is", store.getState());

    })

    // ACTIONS
    store.dispatch({
      type: "ADD_TO_CART",
      payload:[ {
        productId: 1,
        name: "Product A",
        price: 33.33
      },
      {
        productId: 2,
        name: "Product B",
        price: 15.00
      }]
    })

    store.dispatch({
      type: "ADD_TO_CART",
      payload:
      [{
        productId: 3,
        name: "Product C",
        price: 40.00
      }]
    })

这是Chrome控制台的结果：

---

扩展示例不起作用，因为有效负载是一个阵列：

  payload:[ {
    productId: 1,
    name: "Product A",
    price: 33.33
  },
  {
    productId: 2,
    name: "Product B",
    price: 15.00
  }]
})

解决方案是分散有效载荷：

state = {...state, cart: [...state.cart, ...action.payload] };

---

例如：

let state={cart:[{id:1}]}；
const action={payload:[{id:2}，{id:3}]}；
state={…state，cart:[…state.cart，…action.payload]}；
console.log（状态）