Как обращаться с локальным состоянием при использовании реле?

Я работаю над реагирующей/ретрансляционной системой управления контентом. Пользователи могут создавать и изменять статьи, которые хранятся на сервере. Мне было интересно, как лучше всего обрабатывать измененное состояние статьи перед ее сохранением на сервере. Я могу придумать несколько разных способов решить эту проблему:

1) Неконтролируемые входы

Я могу заполнить элементы ввода с помощью defaultValue и нигде не сохранять состояние в явном виде. DOM будет использоваться в качестве моего хранилища для измененных данных. Когда пользователь нажимает "сохранить", я собираю все поля, считываю значения и создаю мутацию.

Pro:

  • Нет обработки локальных состояний

Contra:

  • Я не могу точно знать, какие поля были изменены, и мне нужно будет отправить все данные с помощью мутации. Или понадобится дополнительная логика для создания различий
  • Невозможно обновить другие части представления в ответ на изменения состояния

2) Копировать в локальном штате:

Я мог бы хранить измененную статью в локальном состоянии компонента React и использовать контролируемые поля ввода для ее синхронизации.

Pro:

  • Локальное состояние могло изменить только поля, так что diff будет легко
  • Другие части пользовательского интерфейса могут реагировать на изменения локального состояния

Contra:

  • Это кажется своего рода анти-паттерном, потому что данные в представлении не поступают напрямую из реле. Синхронизация между локальным состоянием и ретранслятором может стать источником ошибок

3) Сервер новый локальный:

Просто создайте мутацию для каждого внесенного изменения. Использование оптимистичных обновлений также должно обеспечить хороший UX.

Pro:

  • Реле - единственный источник правды для данных
  • Состояние сохраняется на стороне сервера, поэтому создается резервная копия, если пользователь случайно закрывает браузер

Contra:

  • Для этого потребуется более сложная реализация на стороне сервера для обработки случаев, когда пользователь хочет отказаться от черновика и т.д.
  • Многие мутации вызвали

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

Я видел, что идет много дискуссий о том, как обрабатывать локальное состояние с помощью Relay, и может появиться встроенное решение с будущей версией Relay, но мне нужно решение, которое работает с текущей версией реле.

Ответы

Ответ 1

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

Похоже, это своего рода анти-паттерн, потому что данные в представлении не поступают напрямую из ретранслятора. Синхронизация между локальным состоянием и ретранслятором может стать источником ошибок

Приложение Relay не будет постоянно синхронизироваться с сервером, если вы не сделаете это. Запрос Relay и реквизиты, которые передаются компоненту, не обновляются постоянно. Если существует вероятность возникновения конфликта, вам нужно решить эту проблему, а это не проблема ретрансляции, и то, где вы храните локальное состояние, не решит эту проблему.

Самый простой способ обработки конфликтов:

  • Используйте опцию № 2 для локального штата
  • Предоставьте каждой статье автоматически увеличивающуюся версию #, которую вы получаете при загрузке статьи для редактирования
  • Требовать мутации редактирования статьи, чтобы указать базовую версию #, на которой она работает. Сервер должен отклонить любую мутацию, у которой есть база, которая не является текущей версией. Сообщите пользователю, что есть конфликтующие изменения, они не работают в последней версии, и вы не можете позволить им сохранить.

Я работал над сложными приложениями Relay, и мы всегда опирались на # 2. Состояние Local React отличное, а контролируемые входы - отличные. Это не анти-паттерн, реле или другое.