Immutable.js конвертирует полученные данные в неизменяемые

Question

Я создаю простое приложение React Flux js, похожее на TodoList, базовая функциональность которого заключается в операциях CRUD на некоторых объектах. Когда приложение запускает, он извлекает данные с сервера и отображает список элементов, затем я могу создать новый элемент, используя форму, отредактировать и удалить. Я решил попробовать подход Immutable.js, но столкнулся с вопросом: когда и какие данные следует преобразовать в неизменяемые объекты. Например, когда я выбираю список, я делаю его неизменным (Immutable.fromJS()), а затем назначаю состояние хранилища, правильно? Но затем я создаю новый элемент, получаю простой объект из полей формы и должен каким-то образом размещать эти данные на сервере. Чтобы избежать загрузки списка снова, я хочу добавить этот новый элемент в список неизменяемых магазинов. Итак, как мне работать с такими ситуациями, когда мне нужно преобразовать некоторые объекты в неизменяемые для использования приложения, а также получить и отправить данные на сервер с помощью простого json?

Answer 1

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

Когда вы создаете новый элемент, вам также нужен неизменяемый объект, который вы отправляете в магазин. Таким образом, состояние магазина - это всего лишь куча неизменных объектов внутри неизменяемого вектора. Тот факт, что вам нужно отправлять объекты JSON на сервер, является детальность реализации связи с сервером, и это должно быть известно только магазину/службе, которая обрабатывает сообщение.

Так поток будет:

1. Fetch элементы с сервера в виде массива JSON объектов
2. Преобразовать что JSON массив неизменного вектора неизменных записей
3. Pass, который неизменен вектор к вашему компоненты для их рендеринга
4. При редактировании/создании новых элементов убедитесь, что вы имеете дело только с неизменяемыми записями (то есть держите неизменную запись newItem на this.state в компоненте и обновляете эту запись при заполнении полей формы изменение).
5. Когда пользователь нажал кнопку «Сохранить», отправьте this.state.newItem в магазин, который добавит элемент в неизменяемый вектор, а также преобразует его в JSON и отправляет на сервер.