Шаблон CRUD PouchDB с использованием Redux - PullRequest
Новая
       31

Шаблон CRUD PouchDB с использованием Redux

0 голосов
/ 03 ноября 2018

Я написал приложение Electron в React, которое использует PouchDB, локально синхронизированную с удаленной CouchDB. Я использую Redux для управления состоянием и хочу узнать, что является лучшим методом для CRUD?

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

Имея это в виду, я уже пробовал 2 паттерна.

  1. Прослушайте изменения с DB.changes(), который будет извлекать все данные при каждом изменении (регулируется промежуточным программным обеспечением, но может работать с redux-saga). Этот метод привел к заметному длинному повороту между взаимодействием пользователя и свежими данными, загруженными в приложение, потому что пользователь будет обновлять, затем отображается сообщение «Обновление успешно» и в конечном итоге отображается сообщение «Данные обновлены». Конечно, в каждой из этих точек выполняются действия, которые влияют на визуализацию пользовательского интерфейса и ухудшают качество взаимодействия с пользователем. метод DB.changes() может вернуть измененный документ, который я не указываю в этом методе 

    DBChanges = DBChanges.changes({
  since: 'now',
  live: true,
  include_docs: false
}).on('change', change => {
  // handle change
  fetchAllDocs().then(setAllDocsInApplication)
});

  2. Прослушайте изменения с DB.changes(), включая измененный документ. Эти изменения могут быть удаленными или от взаимодействия с пользователем в приложении. При каждом изменении просматривайте возвращенный документ и изменяйте состояние приложения в зависимости от изменения. Это делает время полного цикла намного меньше, НО это похоже на плохую схему, поскольку я изменяю извлеченные данные. 

    DBChanges = DBChanges.changes({
  since: 'now',
  live: true,
  include_docs: true
}).on('change', change => {
  // handle change
  if(change.deleted)
    handleRemove(change.doc)
  if(change..doc._rev.split("-")[0] === "1")
    handleNewDoc(change.doc)
  handleUpdateDoc(change.doc)
});

Итак, я хочу знать, каков наилучший шаблон для CRUD с живыми обновлениями?

1 Ответ

0 голосов
/ 06 ноября 2018

Я думаю, что ответ сводится к следующему:

Вам нужно создавать полное состояние приложения из документов с нуля для каждого изменения - или вы можете определить, какое действие требуется от входящих изменений?

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

allDocs → derive initial AppState → render in React

Так что же произойдет, если, например, пользователь создаст новый элемент? 

putDoc → allDocs → derive entire AppState → render in React

или вы: 

putDoc → trigger Redux action that modifies AppState → render in React

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

  • тип документа (надеюсь, у вас есть это свойство)
  • была ли она удалена или нет

Итак, когда в вашем обработчике происходят изменения, вы должны сделать: 

changeHandler → trigger Redux action that modifies AppState → render in React

Какой вариант 2.

Вариант 1 выглядит следующим образом: 

changeHandler → allDocs → derive initial AppState → render in React

Вариант 1 имеет существенный недостаток: если ваше приложение отключается на несколько недель и удаленная БД получает много изменений (например, из-за того, что приложение Electron запущено на другом компьютере), возврат в оперативный режим приведет к A МНОГИЕ изменения загружаются, и каждое отдельное изменение будет вызывать ваш fetchAllDocs() звонок.

НО это похоже на плохую схему, поскольку я изменяю извлеченные данные.

Почему? Вы не изменяете извлеченные данные (я предполагаю, что вы имели в виду исходные allDocs). Первые allDocs помогли только получить AppState, с которым вы работаете в Redux и React. Вы, вероятно, не используете материал в allDocs в качестве своего AppState, не так ли?

...