Как сделать сортировку данных из redux?

Question

[alex4answ]

Добрый день, есть данные - "Дома" и "История Домов".

В компонент - контейнере (HousesListContainer) я селектором получаю и формирую (объединяю) эти данные.
Далее я их передаю в глупый компонент (HousesList) в качестве props.
HousesList - простая таблица, с сортировкой по столбцам.

Данные для сортировки (ключ и направление) хранить в redux store не нужно.
Принимаю решение - хранить данные сортировки (ключ и направление) в локальном state компонента (HousesList).

Но тут я сталкиваюсь с такой проблемой, как мне обработать (отсортировать) данные которые пришли в props и отправить на рендер?

Пока знаю только 1 метод - переданные данные в props сохранить в локальном состоянии и уже с этими данными работать.

Но такой подход мне кажется крайне костыльным, тк оригинальные данные хранятся в redux store, селектором я получаю нужные мне данные, компоную их, передаю в презентационный компонент, там он сохранит эти данные в локальный стейт и уже будет с ними работать.

Думаю можно как-то упростить все и использовать селектор, который будет сортировать данные.

Как правильно решают подобные задачи?

Answer 1

[Vladimir Lewandowski]

Так а в чем проблема-то? Берёте массив из пропсов и сортируете.

const HousesList = (props) => {
  const { items } = props;

  const [sorting, setSotring] = useState(/* состояние сортировки */);

  const sortedItems = useMemo(
    () => items.slice().sort(/* логика сортировки */),
    [items, sorting],
  );

  /* дальше работаете с sortedItems */
};

Comments

[alex4answ]

Vladimir Lewandowski тоже самое сейчас но сортированные элементы храню не в memo, а в локальном состоянии, и сортирую в useEffect где зависимости - состояние сортировки

Чем плох метод с состоянием вместо memo ?

[alex4answ]

Vladimir Lewandowski переделал на ваш способ, с memo, выглядит лучше, меньше хуков и тп :)
Спасибо

[alex4answ]

n1ksON, а почему с useEffect и локальным состоянием они могут потеряться ?

[Vladimir Lewandowski]

alex4answ, с юзеффектом вполне рабочее решение, просто в этом случае больше useMemo подходит.
С копированием состояние редакса в useState есть кейс, когда, например, нужно получить состояние формы из редакса, что-то менять локально в ней, а по onSubmit отправить обратно в редакс.

[n1ksON]

alex4answ, бред я сказал, забудьте. Данные конечно не могут потеряться.
Дока гласит, что мемоизировать значения нужно, когда в хуке написана сложная логика (типа сортировки массива). Видимо поэтому правильнее использовать useMemo, а не useEffect