Как выполнить фоновую синхронизацию c вместо запросов на выборку при изменении пользовательского интерфейса?

Question

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

1. отображение загрузчика пользовательского интерфейса;
2. обновление состояния внешнего интерфейса;
3. отправка запрос на выборку к API для публикации нового комментария;
4. Подождите ответа;
5. отправьте другой запрос выборки в API, чтобы запросить новый список комментариев;
6. ожидание;
7. обновить состояние внешнего интерфейса новыми комментариями;
8. обновить пользовательский интерфейс, чтобы отразить новое состояние с новым комментарием;

И пользователю необходимо подождите, пока интерфейсное приложение взаимодействует с серверной частью почти при каждом изменении данных. Точно так же, как мы делали это ранее с PHP / Python / Ruby, ajax, рендерингом на стороне сервера и шаблонами.

Это заставляет меня задуматься, в чем смысл добавления такой сложности внешнего интерфейса с чем-то как реагировать, когда результат в основном тот же.

Мой вопрос : есть ли альтернативные подходы к этому? Возможно ли вместо этого сделать вышеуказанный случай следующим образом:

1. пользователь нажимает, чтобы опубликовать комментарий;
2. обновить состояние интерфейса;
3. обновить пользовательский интерфейс для отражения нового состояния с новым комментарием;
4. syn c состояние интерфейса с API DB в фоновом режиме;

Answer 1

Я так понимаю, вы считаете, что пользователи тратят время на ожидание успешного выполнения запросов. Однако разве не важнее запретить пользователям продолжать делать неверные запросы к серверу?

1. Получение данных БД для начала и сохранение их в состояниях редукции
2. Выполнение запросов к БД, удерживая пользователей от выполнения каких-либо действий
3. Внесите изменения в состояние редукции, если запросы выполнены успешно

---

Но то, что вы хотите сделать, можно сделать так:

1. Получение данных БД для начала и сохранение их в состояниях редукции
2. Вносить изменения в состояние redux при выполнении запросов к БД в фоновом режиме
3. В зависимости от того, завершились ли запросы, откатить изменения, сделанные пользователями из состояния redux

Answer 2

Ну, поскольку ваш вопрос помечен как response , вы можете использовать библиотеку Apollo (она предназначена для работы вместе с graphql на бэкэнде) для выборки данных. Он предлагает функцию под названием Optimisti c UI , которая будет обновлять интерфейс с уважаемым результатом, пока не получит ответ от серверной части. Если ожидаемый результат отличается от полученного, компонент автоматически изменит пользовательский интерфейс на реальный результат. В случае ошибки отобразится сообщение об ошибке.

Answer 3

Вы определенно могли бы, ваш первый метод - всего лишь способ сделать это.

Помимо «синхронизации» состояния внешнего интерфейса, есть еще один метод - просто предварительно обновить пользовательский интерфейс (шаги 7 и 8 в вашем первом методе) перед выполнением шагов 3-6, и только отменить действие, если вызов API не удался. Это должно позволить немного улучшить UX и для конечного пользователя.