Ngrx example app: how are states wired together

Question

Trying to improve my apps state management i took a look into the ngrx demo app.

In example-app/app/core/containers/app.component.ts the component holds two observables initialised in the constructor. The observables are initialised with

constructor(private store: Store<fromRoot.State>) {
    /**
     * Selectors can be applied with the `select` operator which passes the state
     * tree to the provided selector
     */
    this.showSidenav$ = this.store.pipe(select(fromRoot.getShowSidenav));
    this.loggedIn$ = this.store.pipe(select(fromAuth.getLoggedIn));
}

What i don't understand is, how fromAuth.getLoggedIn can be used there. The store injected is typed fromRoot.State. The root-reducer example-app/app/reducers/index.ts has no connection to the auth-state. The auth-state example-app/app/auth/reducers/index.ts does extend the root-state, so i would understand that these calls on auth-state work, but i don't get how it works the way it is.

bc1105 bc1105 · Accepted Answer · 2018-05-30T16:22:53

The example uses one store, so all feature reducers will have their state stored alongside the root (shared) state, to put it simply, all reducers and states are connected to one single source, the store.

Check out this line in the feature module file: https://github.com/ngrx/platform/blob/master/example-app/app/auth/auth.module.ts#L36 You can see it imports the feature module reducer to the store with the name auth, so fromAuth.getLoggedIn selects a slice of the auth state.

Ngrx example app: how are states wired together

1 Answers