时间戳

首页 > 解决方案 > 根据条件计算项目

javascript - 根据条件计算项目

问题描述

商店的初始状态是：

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动作里面？如果是这样，该操作何时发送？

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

标签： javascriptreactjsreduxreact-redux

解决方案

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

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

在您的状态中存储派生值（例如某些项目（包括itemsCount变量）的计数）并不是一个好习惯（原因类似于您对状态进行规范化的原因）。

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

推荐阅读