使用ngrx/store在Ionic应用程序中进行顶级导航

Question

我有一个应用程序,在加载时具有我称之为非常常见的导航模式.这些是规则:

1. 应用程序打开后,导航到LoadingPage.从storage... 加载
2. 从商店检索信息后......
   1. 如果storage.completedOnboarding是false,请导航到OnboardingPage
   2. 如果storage.completedOnboarding是true,请导航到HomePage
3. 在OnboardingPage中,您可以导航到CreateAccountPage,LoginPage或HomePage中的任何一个.导航离开OnboardingPage设置completedOnboarding为true.

基本上用户应该只在第一次加载应用程序时看到OnboardingPage.

当用户导航离开OnboardingPage时,它应该设置storage.completedOnboarding = true.我订阅了completedOnboarding我的商店中的片段,以确定用户是否应该在应用加载时导航到HomePage或OnboardingPage.

我遇到的问题是,当我更新存储导航到CreateAccountPage或LoginPage这也更新storage.completedOnboarding到true 后进行导航.

在Onboarding组件中,我有:

// When Home, CreateAccount, or Landing is clicked
completeOnboarding(toScreen) {
  this.store.dispatch({type: NAVIGATE_ACCOUNT_PAGE, payload: toScreen});
}

然后在我的效果中,我有:

@Effect()
navigateAccountPage$ = this.actions$
  .ofType(NAVIGATE_ACCOUNT_PAGE)
  .mergeMap(() =>
    Observable.of(
      {type: SET_ONBOARDING_STATUS, payload: true}
    )
  );

基本上我想completedOnboarding在导航到新页面的同时更新.将登录状态写入存储后,将SET_ONBOARDING_STATUS_COMPLETE触发更新存储的操作.这发生在以后 NAVIGATE_ACCOUNT_PAGE.从本质上讲,Effect它将触发这些状态:

SET_ONBOARDING_STATUS
NAVIGATE_ACCOUNT_PAGE
SET_ONBOARDING_STATUS_COMPLETE

为了解决这个问题,我在根据completedOnboarding切片导航之前检查用户当前所在的页面:

this.store.select('completedOnboarding').subscribe(completedOnboarding => {
  if (this.rootPage === LoadingPage) {
    this.rootPage = completedOnboarding ? HomePage : OnboardingPage;
  } else if (this.rootPage === OnboardingPage && completedOnboarding) {
    this.rootPage = HomePage;
  }
});

这有效,但我宁愿不必进行这些额外的条件检查.在某些情况下,我希望能够在不触发Onboarding/Home页面检查的completedOnboarding情况下更新状态.

没有额外的条件检查,有没有办法做到这一点？

Example Plunker-您可以通过设置看到这completedOnboarding对false如在页面加载时的第一次.然后单击底部的"转到"按钮之一将更新目标导航页面,但您将看到上次运行操作仍然存在Completed Onboarding.我们确实需要完成入门,用户进入主页/登录页面,但它也应该导航到该页面,即在该状态链中执行的最后一个操作.