使用 ES6，我如何在 for 循环结束时返回？

Question

我对 Redux、es6、函数式编程和不变性还很陌生。由于我正在使用所有这些，因此我在尝试构建的 redux 应用程序中遇到了一些重大困惑。我遇到的问题是我正在尝试更新我的商店，但它只是更新我的动作有效负载数组中的第一个元素。我知道这是因为我在 for in 循环中进行了返回。问题是，我不知道如何在 for 循环之外返回更新后的状态。

这是我的减速器的外观：

function fruitsReducer(state = initialState, action){
  switch(action.type){
    case 'DEDUCT':
    //only updates one
    for(var actionID in action.payload){
      const actionFruit = action.payload[actionID];
      return {
        ...state,
        fruits: {
          ...state.fruits,
          [actionID]:{
            ...state.fruits[actionID],
            quantityRemaining: state.fruits[actionID].quantityRemaining - actionFruit.deduct
          }
        }
      }
    }
    default:
      return state;
  }
}

这是我的调度：

dispatch({
  type: "DEDUCT", 
  payload: {
    0: {
      "itemName": "banana",
      "deduct": 1
    },
    1: {
      "itemName": "apple",
      "deduct": 1
    },
    5: {
      "itemName": "strawberries",
      "deduct": 1
    }
  }
})

这是我的商店：

{
  fruits: [
    {
      "itemName": "banana",
      "index": 0,
      "quantityRemaining": 10
    },
    {
      "itemName": "apple",
      "index": 1,
      "quantityRemaining": 5
    },
    {
      "itemName": "raspberry",
      "index": 2,
      "quantityRemaining": 2
    },
    {
      "itemName": "kiwi",
      "index": 3,
      "quantityRemaining": 15
    },
    {
      "itemName": "pineapple",
      "index": 4,
      "quantityRemaining": 1
    },
    {
      "itemName": "strawberries",
      "index": 5,
      "quantityRemaining": 3
    }
  ]
}

Answer 1

您可能希望map 您的结果而不是for in 循环，并将结果数组分布在当前状态之上。我重写了你的 reducer 以映射有效负载中的每个操作 id。请注意我们在传播state.fruits 之后如何传播地图的结果。

function fruitsReducer (state = initialState, action){
  switch (action.type) {
    case 'DEDUCT':
      return {
        ...state,
        fruits: [
          ...state.fruits.filter((fruit) => {
            return !Object.keys(action.payload).includes(fruit.index);
          }),
          ...Object.keys(action.payload).map((actionId) => {
              const fruit = action.payload[actionId];

              return {
                [actionId]: {
                  ...state.fruits[actionId],
                  quantityRemaining: state.fruits[actionId].quantityRemaining - fruit.deduct
                }
              }
            })
          ]
      }
    default:
      return state;
  }
}

注意：

您还可以为每个项目定义一个 sub reducer。 @gaeron's todos code 就是一个很好的例子。