State приложения на js. Как его обновлять, как с ним правильно работать?
Поясните, пож-та, общую логику, как правильно организовать работу со state в приложении на js.
Есть сервер, который хранит данные в базе. Есть фронт который должен отображать содержимое базы.
Где здесь state?
Фронт по событию напрямую посылает на сервер пост, сервер обновляет базу, сервер посылает данные на фронт, фронт принимает данные и записывает в state, что влечет обновление страницы (view) приложения.
Или Фронт по событию обновляет state на фронте, что затем влечет отправку пост на сервер и т.д.?
Буду благодарен за совет, пример или ссылку где почитать.
Спасибо
И так и так можно
На примере добавления строки в таблицу:
1. новая строка -> отправляем к серверу -> получаем таблицу с добавленной строкой -> присваиваем реактивной переменной -> обновление интерфейса
2. новая строка -> присваиваем реактивной переменной и отправляем серверу -> обновление интерфейса. Получаем ответ от сервера. Если ошибка, то сообщаем об этом и далее варианты или повторить попытку или забить.
Второй вариант есть по сути optimistic update погуглите что это.
Второй вариант сложнее в реализации, но более юзер френдли.
Тут все зависит от того, как вы хотите спроектировать клиент-серверные отношения ваших приложений. Можно по разному.
Сам я не юзаю, но как пример можно привести Fullstack framework - Meteor.
Там данные передаются real-time. То есть данные на клиенте реагируют на изменения данных на сервере:
Meteor provides full stack reactivity, allowing your UI to seamlessly reflect the true state of the world with minimal development effort.
1)Идет запрос данных с сервера,
2)После получения записываешь в store
3)если изменяешь что то на клиенте, отправляешь на сервер, спрашиваешь заново с сервера, перезаписываешь в store,
Не утверждаю что это бест практис но сам делаю так
Vladimir Zhosan: Не могу сказать точно, не использую данный подход и фреймворк, но похоже на то.
На Vue я делаю всегда по разному. Обычно по максимуму использую front-state.