Reducer 返回对象而不是数组答案

【问题标题】：Reducer returns object instead of arrayReducer 返回对象而不是数组
【发布时间】：2017-10-15 23:42:02
【问题描述】：

我的减速器有一个奇怪的问题。它返回一个对象而不是数组。我该如何解决这个问题？

export function reducer(state = {cart: []}, action) {
  switch (action.type) {
    case "ADD_TO_CART": {
      let oldState = [...state.cart]


      let index = oldState.findIndex(x => x.name === action.payload.name)


      return index > -1 ? {...state, cart: oldState} : {...state, cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })} 


    }
    default: {
      return {
        ...state
      }
    }
  }
}

编辑：为澄清起见，我尝试将操作有效负载添加到购物车数组中，如果它不存在并增加数量，然后如果它已经存在于购物车数组中，则只增加数量。 State 应该是一个对象，而 cart 应该是一个数组。当我期望一个数组时，购物车似乎返回了一个对象。

附：我对 ES6 很危险……

【问题讨论】：

它应该返回一个对象。另外，您的操作永远不会做任何事情。你从来没有把任何东西放入实际的数组中。
我更新了代码。我仍然没有得到想要的结果。
return { ...something } 显然会返回一个对象，而且也是多余的。相当于return something。我想你不明白spread operator (...) 做了什么。为什么你希望这个函数返回一个数组？
我不确定我是否理解传播运算符...
抱歉..让我澄清一下，购物车应该是一个数组状态应该是一个对象

标签： javascript redux

【解决方案1】：

你的代码的问题是这一行：

{...state, cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })}

这相当于这段程序代码：

const newCart =
  Object.assign({}, action.payload, {quantity: action.payload + 1 }

Object.assign({}, state, { cart: newCart });

Object.assign 接受任意数量的参数，只要它们都是对象，然后从右到左合并它们的属性。

您希望返回的对象中的属性cart 是一个数组，而您正在清除为它分配一个对象。

【讨论】：

【解决方案2】：

看来你这里有问题：

cart: Object.assign({}, action.payload, {quantity: action.payload + 1 })}

我建议应该是这样的：

cart: [...oldState, Object.assign({}, action.payload, {quantity: action.payload + 1 })]

但这部分Object.assign({}, action.payload, {quantity: action.payload + 1 } 真的很令人不安。您正在使用 action.payload 作为对象，紧随其后 - action.payload + 1 作为数字。

如果你想增加quantity - 那么

if (index > -1) {
  oldState[index] = {...oldState[index], quantity: oldState[index].quantity + 1};
  return {...state, cart: oldState};
} else {
  oldState.push({...action.payload, quantity: 0});
  return {...state, cart: oldState};
}

【讨论】：

好的，所以我尝试将操作有效负载添加到购物车数组中，如果它不存在并增加数量，然后如果它已经存在于购物车数组中，则只增加数量
在原来的问题中吗？那么请更新问题。