Как сохранить состояние React в синхронизации с базой данных MySQL
Сцена: Я создаю простое веб-приложение календаря, которое использует React для интерфейса и MySQL на сервере для сервера. Приложение получает список всех событий с сервера при его первом подключении, отображает их пользователю и позволяет выполнять операции CRUD. Все работает как положено.
Вопрос: при операции создания, обновления или удаления я должен:
Обновлять базу данных и состояние «самостоятельно».
Обновите базу данных, сделайте еще один вызов серверу, чтобы получить новый список событий, а затем установите состояние, равное этому новому списку.
Сделайте что-нибудь совершенно другое.
Импетус: У меня сложилось впечатление, что для моих данных должен быть «единый источник правды», и мне кажется, что первый вариант выше создает ситуацию, когда у меня есть два «источника», которые в некоторых ситуациях могут рассинхронизироваться. .
Ответы 1
И 1., и 2. Правильны, это действительно зависит от того, чего вы пытаетесь достичь. Вы можете попробовать использовать оптимистичные обновления, что означает, что при отправке этих операций вы меняете состояние, как если бы оно было успешным (что должно быть в большинстве случаев), и вносить исправления, если операция по какой-либо причине завершилась неудачно в базе данных / бэкэнде. Это создает приятный интерфейс. В этих случаях вы также можете получить новые данные после операции.
Если данные в базе данных могут изменяться из нескольких источников, вам необходимо получать их периодически и, скорее всего, после изменений и соответствующим образом обновлять интерфейс.
Случай 1. должен работать, если вы единственный, кто манипулирует данными (по крайней мере, они должны быть в состоянии). В этом случае серверная часть / база данных по-прежнему должна сообщать о состоянии выполненной операции, чтобы помочь вам управлять состоянием. Вы также можете отображать какой-то индикатор загрузки, пока операция ожидает, вместо оптимистичного обновления состояния.
Вы можете прочитать больше об оптимистичных обновлениях здесь: https://www.guidesmiths.com/en/news-and-blog/anatomy-of-a-react-application-optimistic-updates-22
Ах, конечно. Спасибо за ссылку и замечание о нескольких источниках, вносящих изменения. Я не думал об этом для моего прототипа здесь, но это определенно будет иметь значение для меня позже :)
Что ты уже сделал? Нам приятно помочь вам с Минимальный, полный и проверяемый пример