j-snow
@j-snow
Java junior developer

Как сделать мгновенное обновление страницы до ответа от сервера?

Пишу сайт на React. Допустим это обычный TODO-лист.

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

Проблема заключается в поле ID, которое генерируется сервером, и до ответа сервера узнать мы его не можем. А этот ID нам нужен на клиенте для того, чтобы можно было отмечать выбранную задачу, а также использовать его в адресной строке.

Какие есть варианты решения?
Спасибо!
  • Вопрос задан
  • 376 просмотров
Решения вопроса 1
@camelCaseVlad
В UI Development существует концепт оптимистичного UI (optimistic UI).

Самый простой пример данного концепта - нажатие на кнопку "Мне нравится" со счетчиком поставленных лайков. На клиенте можно сделать +1 сразу же, и не заставлять юзера ждать, пока с сервера придет новое значение лайков на данной кнопке.

Решение вашей проблемы зависит от выбранных вами инструментов при создании приложения, но вы можете сделать нечто похожее на это:

Вот как выглядит ТУДУ с ожиданием сервера:

1*9r4u7IxFQkl8cNcOI4IYUw.gif

Вот как выглядит с оптимистичным юай:

1*aOhoD9FUKiEBUQM39zvvUg.gif

Тут видно, что новый, не записанный на сервере Item отображается в стиле "Loading..."

Используйте данный подход, дайте загружаемой Item временный ID
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Kirill-Gorelov
С ума с IT
Ну смотри.

аяксом отправляешь todo, а саму задачу просто отображаешь как будто она уже добавлена. К тому же как я понял это уже сделано.
Так вот, пока ты отобразишь задачу и пока пользователь будет ее разглядывать, ты уже получишь id, а просто подставишь туда куда тебе нужно.
ну можно такой костыль придумать)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы