javascript - 根据条件计算项目

Question

商店的初始状态是:

let initialState = {
  items: [],
  itemsCount: 0,
  completedCount: 0
};

当我发送类型为 ADD_ITEM 的操作时，新项目被添加到 items 数组并且 itemsCount 递增(虽然我'我不确定我是否做对了)

case "ADD_ITEM": {
  return {
    ...state,
    items: [
      ...state.items,
      {
        title: action.name,
        dateCreated: action.date,
        id: action.id,
        isChecked: false
      }
    ],
    itemsCount: state.items.length + 1
  };
}

和TOGGLE_ITEM

case "TOGGLE_ITEM": {
  return Object.assign({}, state, {
    items: state.items.map(item => {
      if (item.id !== action.id) {
        return item;
      }
      return Object.assign({}, item, {
        isChecked: !item.isChecked
      });
    })
  });
}

当我发送类型为 REMOVE_ITEM 的操作时，将执行以下操作:

case "REMOVE_ITEM": {
  return Object.assign({}, state, {
    items: [...state.items.filter(item => item.id !== action.id)],
    itemsCount: state.items.length - 1
  });
}

现在我正在尝试计算 isChecked 为 true

的项目

state.items.map(item => {
    if(item.isChecked){
        //Increment count
    }
})

我不确定具体应该在哪里做。

在 TOGGLE_ITEM 操作中？

在新的 COUNT_ITEM 操作中？如果是，什么时候发送该操作？

如何将递增的数字分配给状态的一部分？

Answer 1

您可以在您的操作/组件等需要时计算它:

items.filter(item => item.isChecked).length

在您的状态中存储派生值(例如某些项目的计数(包括 itemsCount 变量))不是一个好的做法(原因类似于您标准化状态的原因)。

如果你担心性能(它是 O(n) 所以一般来说应该不是什么大问题)，你可以使用 memoization library .