Redux - как реагировать на изменения один раз

Question

Я использую Redux для реагирования на изменения в состоянии моих приложений и визуализации интерфейса в соответствии с моим состоянием. Теперь некоторым компонентам требуется однократный вызов метода.

Следующий пример:

У меня есть сетка. Выбор элемента в сетке изменяет состояние моего приложения, и я устанавливаю атрибут selected для этого элемента.

При добавлении элемента устанавливает атрибут selected моего состояния для добавленного элемента. Но тогда для сетки требуется вызов grid.clearCache(), чтобы фактически отобразить добавленный элемент.

Состояние в обоих случаях выглядит фактически одинаково, и я не хочу вызывать функцию clearCache, если она не нужна. Элементы не являются частью состояния и лениво загружаются самим компонентом.

Добавление атрибута clearcache к состоянию и последующее его восстановление кажется неправильным.

Как мне добиться желаемого поведения? Как правильно оформить состояние в этом случае?

Answer 1

Я не совсем понимаю вашу проблему. Если вы добавите новый предмет, реквизит изменится, поэтому Сетка должна обновиться автоматически (спасибо за магию React). Больше не нужно звонить grid.clearCache().

Вот мой простой дизайн редуктора для вашей задачи.

const preState = {
  items: {
    1: {
      id: 1,
      itemName: '1'
    },
    2: {
      id: 2,
      itemName: '2'
    }
  },
  order: [1, 2],
  selectedItem: 1
}

export default (state = preState, action) => {
  switch (action.type) {
    case 'SELECT_ITEM':
      return {
        ...state,
        selectedItem: action.itemId
      }
    case 'ADD_NEW_ITEM':
      return {
        ...state,
        items: {
          ...state.items,
          [action.item.id]: action.item
        },
        order: [...state.order, action.item.id],
        selectedItem: action.item.id
      }
    default:
      return state;
  }
}

А ваши Grid Component должны читать items и selectedItem (order, если вам нужно отсортировать предметы) из магазина притока.

Answer 2

Как насчет хранения дополнительного флага, например firstUpdate: true?