Выяснение firestore с ngrx

Я, кажется, зациклился на этом, так как не так много руководств или руководств по использованию firestore с ngrx.

Допустим, у нас есть список организаций, все они будут использоваться в двух компонентах: componentA и componentB.

  1. Я могу создать эффект, который использует LOAD_ACTION, который объединяет наблюдаемые изменения значения коллекции, а также отображает его в LOAD_ACTION_SUCCESS для каждого компонента.

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

Но для этого требуется, чтобы компонент отправлял LOAD_ACTION для начала, что может показаться немного ошибочным для REAL_TIME_DATA, поскольку он продолжит обновляться после. Даже когда не используется.

  1. Я мог бы просто подключить сервисы, наблюдаемые за изменениями значений (как это делает LOAD_ACTION), в самом компоненте. Состояние не будет сохранено, но наблюдаемая Firebase похожа на Store (если она не сохранена на клиенте), поэтому, если она уже получила данные, она уже есть.

Больше не использовать 2 копии данных для состояния.

Что приводит меня к следующему:

  1. Может быть, у него есть хранилище для «коллекции» из службы, из которой оба компонента получают данные, например, если нет нескольких копий этого состояния везде, где оно используется.

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

Когда дело доходит до ngrx, мне кажется, что работа с данными в реальном времени сбивает меня с толку.

Также будут оценены примеры.


firebase google-cloud-firestore ngrx ngrx-effects ngrx-store
person Blom    schedule 19.10.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Я только что написал небольшой блог по поводу того вопроса, где я хочу сравнить различные способы подключения Firestore к NGRX.

По сути, вы можете сопоставить действия valueChanges () с вашими действиями в магазине, и магазин будет синхронизирован. Я использовал действие эффекта, но это тоже может быть в сервисе.

  @Effect()
  getData$ = this.dataDb.getFakeDataStateChanges().pipe(
    mergeMap(actions => actions),
    map(action => {
      return {
        type: `[FirstData] ${action.type}`,
        payload: { id: action.payload.doc.id, ...action.payload.doc.data() }
      };
    })
  );

Где действия похожи

export enum FirstActionTypes {
  FIRST_DATA_ADDED = '[FirstData] added',
  FIRST_DATA_MODIFIED = '[FirstData] modified',
  FIRST_DATA_REMOVED = '[FirstData] removed'
}

а редуктор обрабатывает данные

export function firstReducer(state: State = initialState, action: FirstAction) {
  switch (action.type) {
    case FirstActionTypes.FIRST_DATA_ADDED: 
      return firstAdapter.addOne(action.payload, state);

    case FirstActionTypes.FIRST_DATA_MODIFIED:
      return firstAdapter.updateOne(
      {
        id: action.payload.id,
        changes: action.payload
      },
      state
    );

    case FirstActionTypes.FIRST_DATA_REMOVED:
      return firstAdapter.removeOne(action.payload.id, state);

    default: {
      return state;
    }
  }
}
person Michael Warneke    schedule 06.12.2017
comment
Это похоже на то, что fireship.io рекомендует это делать. Я по-прежнему считаю, что использование сервиса чище. Я ищу решение, которое полностью отделяет компонент от серверной части. - person thomi; 31.07.2019