Обнаружение изменений в хранилище NGRX перед закрытием

Question

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

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

Answer 1

ОБНОВЛЕНИЕ: После тщательного рассмотрения, я думаю, что ваше требование проблематично: если вы храните backedUp флаг в вашем штате, а затем, как только флаг обновляется (до false), это приведет к резервному копированию магазина. Затем после резервного копирования хранилища флаг должен быть обновлен до true, это приведет к резервному копированию хранилища. Это будет происходить вечно.

---

Вот что я имею в виду на данный момент:

1. Создать backUp особенность магазина:

Вы можете поставить backedUp Отметьте там, ваш магазин может выглядеть так:

{
  ...
  backUp: {
    backedUp: boolean;
    backingUp: boolean;  // optional
    lastVersion: string; // optional
    ...
  }
}

2. Создайте BACK_UP_STORE_ACTION а также STORE_BACKED_UP_ACTION,
3. Создайте два эффекта для просмотра и резервного копирования магазина:

Вы можете написать это так:

  constructor(private actions$: Actions,
              private store: Store<fromRoot.State>,
              private backUpStoreService: BackUpStoreService) {
  }

  @Effect()
  watchState$ = this.store
    .debounceTime(1000) // save store 1 second after the last change, preventing API spamming
    .map(state => new storeBackUp.BackUpStoreAction(state));

  @Effect()
  backUpState$ = this.actions$
    .ofType(storeBackUp.BACK_UP_STORE_ACTION)
    .concatMap((action: storeBackUp.BackUpStoreAction) => this.backUpStoreService.backUp(action.payload))
    .map(response => new storeBackUp.StoreBackedUpAction(response));

4. Создайте метаредуктор для обновления backedUp флаг.

Вот код sudo для метаредуктора, эта метаредукторная проверка для каждого действия, если действие BACK_UP_STORE_ACTION, это установит backedUp флаг ложный; если действие STORE_BACKED_UP_ACTION, это установит backedUp признак истины.

export function storeBackUpMetaReducer(reducer: ActionReducer<State>): ActionReducer<State> {
  return function (state: State, action: any): State {
    if (action.type === storeBackUp.STORE_BACKED_UP_ACTION) {
      state.backUp.backedUp = true;
    } else if (action.type === storeBackUp.BACK_UP_STORE_ACTION) {
      state.backUp.backedUp = false;
    }
    return reducer(state, action);
  };
}

5. Теперь вы можете смотреть на backedUp флаг, чтобы подсказать использование, когда они хотят выйти, прежде чем магазин был сохранен.