Using ngrx / store to navigate top level in Ionic app

Question

Using ngrx / store to navigate top level in Ionic app

I have an application that has what I would call a fairly common loading navigation pattern. These are the rules:

When the application opens, go to the LoadingPage item. Download from storage...
After retrieving information from the store ...
- If storage.completedOnboarding- false, go to OnboardingPage
- If storage.completedOnboarding- true, go to HomePage
From OnboardingPage you can go to any of CreateAccountPage, LoginPage or HomePage. The transition from OnboardingPage sets from completedOnboardingto true.

In fact, users should only see OnboardingPage when they first load the application.

When the user navigates from OnboardingPage, he must install storage.completedOnboarding = true. I subscribe to a snippet completedOnboardingin my store to determine if the user should navigate HomePage or OnboardingPage when the application loads.

The problem I am facing is that when updating the repository to go to CreateAccountPage or LoginPage, it also updates storage.completedOnboardinguntil trueafter the navigation is done.

In the Onboarding component, I have:

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

Then in my effects I have:

@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 slice:

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