Подсчет предметов по условию

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

Счет необходимо пересчитать на TOGGLE_ITEM, а также ADD/REMOVE_ITEM. И редуктор может использовать уменьшение как

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

Однако лучше не хранить COUNT в редукторе, так как он напрямую выводится из элементов, вы можете просто рассчитать счет, используя memoized selector в вашей функции mapStateToProps. Вы можете использовать reselect для написания запомненных селекторов или создать свой собственный

Answer 2

Просто быстрое примечание, чтобы уменьшить дополнительные издержки в вашем коде действия:

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

Answer 3

Вы можете просто вычислить его, когда вам это нужно в ваших действиях / компонентах и ​​т.д .:

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

Не рекомендуется хранить производные значения, такие как количество определенных элементов (включая переменную itemsCount) в вашем состоянии (причины, аналогичные тем, почему вы нормализуете свое состояние).

Если вы беспокоитесь о производительности (это O (n), поэтому в общем не должно быть проблем), вы можете использовать библиотеку памяток .