5

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

  1. 当应用程序打开时，导航到 LoadingPage。storage从...加载
  2. 从商店检索信息后...
    1. 如果storage.completedOnboarding是false，请导航到 OnboardingPage
    2. 如果storage.completedOnboarding是true，导航到主页
  3. 从 OnboardingPage，您可以导航到 CreateAccountPage、LoginPage 或 HomePage 中的任何一个。从 OnboardingPage 导航completedOnboarding到true.

本质上，用户应该只在他们第一次加载应用程序时看到 OnboardingPage。

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

我遇到的问题是，当我更新商店以导航到 CreateAccountPage 或 LoginPage 时，这也会storage.completedOnboarding在执行导航true 后更新。

在入职组件中，我有：

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

这可行，但我宁愿不必进行这些额外的条件检查。在某些情况下，我希望能够在不触发入职/主页上的检查的情况下更新completedOnboarding状态。

有没有办法在没有额外的条件检查的情况下做到这一点？

Example Plunker-- 您可以通过设置completedOnboarding为false例如第一次加载页面时看到这一点。然后点击底部的任一“Go To”按钮都会更新目标导航页面，但是你会看到上次运行的操作仍然是Completed Onboarding. 我们确实需要在用户进入主页/登录页面时完成入职，但它也应该将他们导航到该页面，即在该状态链中执行的最后一个操作。

4

0 回答 0