Question

商店的初始状态是：

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 }; }会增加（虽然我不确定我是否会＆＃39} ;我正确地做了）

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行动中？

在新的statusSelected: number = 1; //step 1 by default .... displayActiveness(status) { if (this.statusSelected === status) { return 'active'; } if (this.statusSelected > status) { return 'actived'; } if (this.statusSelected < status) { return 'inactive'; } }行动中？如果是的话，该行动何时发出？

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

Answer 1

您可以在行动/组件等需要时计算它：

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

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

如果你担心表现（它是O（n），所以通常不应该是一个大问题），你可以使用memoization library。

Answer 2

需要在TOGGLE_ITEM和ADD/REMOVE_ITEM重新计算点数。计数减少器可以使用reduce等

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

但是，您最好不将COUNT存储在reducer中，因为它可以直接从项目中导出，您只需使用memoized selector函数中的mapStateToProps计算计数。您可以使用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
  };
}

根据条件计算物品

3 个答案: