Как одновременно использовать более одного React-компонента, если только один Reducer?

Question

[Кирилл]

Допустим есть страница на React. На ней на текущий момент расположен только один React-компонент "Каталог", который представляет из себя каталог некоторых предметов, с пагинацией, сортировкой и другими "настройками".

Но возникла необходимость на эту же страницу разместить ниже ещё один такой каталог, но просто немног ос другими настройками.

Как правильно в таком случае организовать Reducer, если я в редюсере храню загруженные элементы каталога, направление сортировки, страницу пагинации и прочие настройки, связанные с каталогом?

Ведь каталогов теперь будет два, а редюсер рассчитан, что на странице будет инициализирован только один Каталог. Как бы сделали Вы? Структура данных в редюсере такая:

{
    items: [],
    page: 1,
    sort: null,
    filter: null,
    category: null
}

Это сейчас на текущий момент так. Если редюсер адаптировать под одновременное использование нескольких каталогов, то думаю можно ввести в объект подразделы. Какие у кого мысли?

Answer 1

[Дмитрий]

Если сортировка данных относится только к текущему компоненту, ее можно хранить в стейте компонента. В редаксе имеет смысл хранить только те данные, которыми пользуются несколько компонентов или которые нужно сохранить между сеансами. Если все же есть необходимость хранить сортировки и отборы именно в хранилище редакса, то просто создайте какие-то уникальные для компонента ключи и храните в них

{
  items: [],
  settings: {
    key1: { filter: {}, sort: {}, page: 2 },
    key2: { filter: {}, sort: {}, page: 1 },
  }
}