Блог

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

Я изо всех сил пытаюсь найти аккуратный, чистый подход к обновлению порядковых номеров. Какой хороший способ сделать это в Redux reducer?

Моя текущая state структура данных по существу:

 {
    'asdf': { title: 'Item 1', sequence: 0, ... },
    '1234': { title: 'Item 2', sequence: 1, ... },
    'zzzz': { title: 'Item 3', sequence: 2, ... }
}
  

Мое действие заключается

 { type: REORDER_ITEMS, oldRow: 1, newRow: 0 }
  

Что должно привести к состоянию

 {
    'asdf': { title: 'Item 1', sequence: 1, ... },
    '1234': { title: 'Item 2', sequence: 0, ... },
    'zzzz': { title: 'Item 3', sequence: 2, ... }
}
  

Мой текущий редуктор использует Object.keys(state).reduce() для перебора элементов и изменения sequence одного за другим, в зависимости от того, равны ли они, больше или меньше желаемых номеров строк. Есть ли более аккуратный способ управлять этим?

Вы могли бы сделать еще один шаг к нормализации: извлечь последовательность в отдельный фрагмент состояния и сохранить порядок в виде массива идентификаторов.

 {
  items : {
    'asdf': { title: 'Item 1', ... },
    '1234': { title: 'Item 2', ... },
    'zzzz': { title: 'Item 3', ... }
  },
  sequence: ['1234', 'asdf', 'zzzz']
}
  

Таким образом, у вас мог бы быть отдельный редуктор для обработки действий, изменяющих вашу последовательность, только с использованием операций с массивами.