ngrx/strore example app, why child state extends root state?

Question

I'm playing with the example app of ngrx-store https://github.com/ngrx/platform/tree/master/example-app and can't figure out a piece of code in "app\auth\reducers\index.ts" file

export interface State extends fromRoot.State {
  auth: AuthState;
}

In the same file we already have interface that describes a state

export interface AuthState {
  status: fromAuth.State;
  loginPage: fromLoginPage.State;
}

So why we should create another state, and what's more important, why this new state should extend the root state?

Here is the root state

export interface State {
  layout: fromLayout.State;
  routerReducer: fromRouter.RouterReducerState<RouterStateUrl>;
}

Isn't the whole state is just an object that holds all the child states, like auth state, and books state? So it can look like

{
  root: rootState,
  auth: authState,
  books: booksState
}

Then, when a child state extends the root state, it just adds up more information to the child state, that isn't relevant to it? So in this case authState and booksState contain the same info that rootState contains plus its own information?

Zacol Zacol · Accepted Answer · 2017-11-19T01:16:14

Following the comments in app\reducers\index.ts:

As mentioned, we treat each reducer like a table in a database. This means our top level state interface is just a map of keys to inner state types.

In this example, interface AuthState describes a state of a feature module.

interface State extends fromRoot.State gives you information about full state accessible from this feature module (feature module state + top state). Under the same name, you should keep different information depending on the feature module. It’s a good practice.

ngrx/strore example app, why child state extends root state?

1 Answers