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