Давайте придумаем игрушечный случай: предположим, у нас есть приложение, в котором есть кнопка «большой палец вверх» для каждого сообщения — вы знаете, при нажатии на нее кнопка должна стать синей, и сервер должен запомнить, что этот парень поднял ее.
Итак, мой вопрос: как лучше всего реализовать это? У меня есть два наивных решения, но я думаю, что у них обоих есть некоторые недостатки. Поэтому мне интересно, есть ли лучшее третье решение, или одно из моих - это то, что делают все.
К вашему сведению, вот мои две попытки:
Метод A. При нажатии активируются две функции. (1) Непосредственно измените состояние (например, в Redux), установив state.thumbup=true, а затем React автоматически повторно отобразит пользовательский интерфейс. В то же время (2) отправьте сообщение HTTP на сервер. Когда сервер получит его, он обновит свою базу данных (например, user.setThumbUp(true);repo.save(user);).
Проблема в том, что мне приходится дублировать свою логику дважды, один раз на клиенте ("при нажатии state.thumbup становится 1") и один раз на сервере ("если щелкает клиент, одно место в база данных изменится на 1"). В нашем примере это просто, но это не соответствует правилу KISS, и много кода дублируется, когда действие усложняется...
Метод B: при нажатии клиент не изменяет никакого локального состояния. Вместо этого мы отправляем только сообщение HTTP на сервер. Затем сервер получает его и изменяет свою базу данных. После того, как мы знаем, что сервер выполнил свою работу, клиент запускает HTTP-запрос, чтобы получить последнее состояние всей страницы. После того, как клиент получает данные, они отображаются, и пользователь видит, что палец вверх окрашивается.
Конечно, при этом исчезает дублирование кода. Однако теперь пользователь будет долго ждать (ожидая HTTP-запроса), прежде чем увидит, что пользовательский интерфейс изменился. Кажется, это тоже очень плохо...
Поэтому мне интересно, есть ли лучшее решение? Или все просто используют первый метод? Большое спасибо!
