根据条件对项目进行计数

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），那么一般来说就不应该成为大问题），则可以使用备注库 。

Answer 2

需要在TOGGLE_ITEM以及ADD/REMOVE_ITEM上重新计算该计数。 而计数减少器可以使用减少像

state.items.reduce((acc, item) => {
    if(item.isChecked){
        acc += 1;
    }
    return acc;
}, 0)

但是，最好不要将COUNT存储在reducer中，因为它可以直接从项memoized selector ，您可以使用mapStateToProps函数中的memoized selector简单地计算计数。 您可以利用reselect编写备忘的选择器，也可以创建自己的选择器

Answer 3

请注意，为了减少操作代码中的额外开销：

case "ADD_ITEM": {
  let items=state.items
  items.push({
      title: action.name,
      dateCreated: action.date,
      id: action.id,
      isChecked: false
    })
  return {
    ...state,
    items: items,
    itemsCount: state.itemsCount+1
  };
}