Question

我在Angular应用程序中使用NGRX，并且允许用户在存储的不同版本之间进行切换，这些版本是从数据库存储和重新加载的。我希望能够检测到何时对商店进行了更改但尚未保存，因此我可以提示用户在退出或打开其他版本之前进行保存。

我的第一个想法是在商店中拥有一个属性，但是我拥有大量的简化程序，以至于每次更新该属性都是一场噩梦。有没有一种方法可以设置一个标志，该标志在调用任何化简器将状态设置为脏或未保存之前将被触发？还是有更好的解决方案，知道退出前需要保存？

Answer 1

更新：经过全面考虑，我认为您的要求是有问题的：如果将backedUp标志存储在您的状态中，则一旦该标志更新为false ），则会触发要备份的商店。然后，在备份存储后，应将标志更新为true，这将触发再次备份存储。这将永远发生。

这就是我目前的想法：

创建backUp存储功能：

您可以在其中放置backedUp标志，您的商店可能像这样：

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

创建BACK_UP_STORE_ACTION和STORE_BACKED_UP_ACTION。
创建两个效果来监视和备份商店：

您可能想要这样写：

  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));

创建一个meta reducer来更新backedUp标志。

这是元约简的sudo代码，此元约简检查每个动作，如果动作为BACK_UP_STORE_ACTION，它将backedUp标志设置为false；如果操作为STORE_BACKED_UP_ACTION，则会将backedUp标志设置为true。

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);
  };
}

现在，您可以观看backedUp标志，在他们想要在保存商店之前退出时提示使用。

关闭前检测NGRX存储中的更改

1 个答案: