Как взаимодействовать с api в React todo приложении?

Question

[Егор Бабинцев]

Имеется crud rest api на nestjs. Роуты для запроса отдельных тасков, всех сразу, обновления и удаления по id и создания. Как в react приложении правильно построить взаимодействие с этим api? То есть я при монтировании компонента вытаскиваю массив объектов задач и генерирую на их основе компонент. Но когда задачи меняются (например меняется isChecked свойство), что я должен делать? Модифицировать одновременно задачи, хранящиеся в состоянии и отправлять put запрос? Или отправлять put запрос, а потом заново вытаскивать весь массив и записывать его в стейт (мне кажется это некорректно с т. зрения производительности)? Или все операции выполнять с задачами в стейте, а потом, при размонтировании компонента просто записывать их все разом через api в базу данных? Большое спасибо)

Answer 1

[Салават Салахутдинов]

Чтобы не было рассинхрона между клиентом и сервером(в случае ошибки на сервере например), надо обновлять стейт только после успешного сохранения на сервере. Заново из сервера задачи вытаскивать нужно если их добавляют, изменяют или удаляют одновременно несколько человек(для полного реал-тайм обновления тогда лучше использовать сокеты).

Comments

[Егор Бабинцев]

Просто я боюсь, что изменение состояния будет очень сильно завязано на скорости ответа api. То есть, чтобы поменять isChecked в state нужно немного времени, а вот чтобы дождаться ответа от сервера, и только потом поменять - больше. Мне кажется это не очень правильный подход с точки зрения производительности

[abberati]

Егор Бабинцев, почитай про подход optimistic ui. Там всё обновляется сразу, но платить придётся сложностью кода