Как корректно спроектировать структуру redux стора?

Question

[Андрей Прозоров]

Добрый день. Помогите с холливарным вопросом.

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

Есть сущность например toDo. Например такого вида она нам приходит с сервера:

{
   id: number;
   text: string;
   completed: boolean;
}

Я делаю компонент где использую множественный выбор этих тудушек (ToDoList), для того чтобы например скопом отправить на сервер запрос закомплитить их сразу пакетом:

POST server.com/complete
id[]

Где мне хранить признак того что тудуха заселекчена?

Два варианта:

1) в redux я создам стор с массивом куда сложу id[]

2) Модифицирую модель и добавлю туда isSelected например

{
   id: number;
   text: string;
   completed: boolean;
   isSelected: boolean;
}

Или какой то еще вариант ...

Пожалуйста только аргументированно. Спасибо

PS: Добавка и усложнение к задаче. Есть компонент в котром например нужно показать каунтер выделенных toDo. Это на тот случай если захочеться сделать стейт локальным на уровне ToDoList

Comments

[Yustas Alexu]

Плохой пример для редакса. Тудушку можно легко запилить через внутренний стейт. Собственно тогда и вопросы такого рода отпадут сами собой.

Answer 1

[Антон Швец]

Модифицировать модель конечно не нужно.
Массив с айди тоже не очень.

Третий вариант - хранить мапу, т.е. объект где ключи - айди, а значения isSelected.
Более корректный вариант это WeakMap, где ключи это объекты тудушек, но я не знаю насколько оно дружит с redux.

Вообще распространенная практика это создание параллельного entity state с теми же ключами, где и содержится текущее ui состояние моделей.

Comments

[Андрей Прозоров]

что то мне подсказывает что не дружит. погуглю

[Антон Швец]

Андрей Прозоров, а если уж решите менять модель, то лучше добавить в нее что-нибудь вроде __ui: { isSelected: true }
Чтоб было четко понятно что к модели оно не имеет отношения.

[Андрей Прозоров]

Добавить можно но не рекомендуеться. Map мутабильный структра. Стор заточен под иммутабельность

[Андрей Прозоров]

Антон Швец,

Я понимаю ваш понинт НО. А кто сказал что в моя модель такая а не вот такая? Я автор своей моедели. Вот я передумал и моя модель, исплоьзуемая во фронте стала такая. Я не модифицировал модель а перписал ее в новом стиле)) Это перестановка мест слагаемых, но ощущения меняються

[Антон Швец]

Андрей Прозоров, чего?
Не, ну если хотите жестко маппить объекты с бэкенда во что-то не соответствующее контракту, то вперед, на поле с граблями :)

[Андрей Прозоров]

Антон Швец, Ну а так надо мапить в момень когда я подсвечиваю заселекченный todo чекбокс. Класс навешиваю или еще что-то

[Антон Швец]

Андрей Прозоров, есть еще готовые либы типа redux-ui

Ну а так надо мапить в момень когда я подсвечиваю заселекченный todo чекбокс

"маппить" это проецировать один объект в другой

[Андрей Прозоров]

Антон Швец, погуглю, спасибо

[Андрей Прозоров]

Антон Швец, хорошо, в варианте с id[] нужно делать все же какие то операции например:

if(selectedIds.includes[todo.id]) {
....
}