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

Question

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

这就是我的 reducer 的样子:

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

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

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;
  }
}

注意:

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