What's NgRx

NgRx is a framework for building reactive applications in Angular. NgRx provides libraries for:

• Managing global and local state.

• Isolation of side effects to promote a cleaner component architecture.

• Entity collection management.

• Integration with the Angular Router.

• Developer tooling that enhances developer experience when building many different types of applications.

To install NgRx we need:

ng add @ngrx/store

and

ng add @ngrx/store-devtools

This should be visible in your app.module.ts

StoreModule.forRoot(reducers, { metaReducers }),
StoreDevtoolsModule.instrument({ maxAge: 25, logOnly: environment.production })

Once we need to add a store we should add the following command in our terminal. In our case we will add an auth/Auth store.

ng generate store auth/Auth --module auth.module.ts

in the auth.module.ts we should see

StoreModule.forFeature('auth', fromAuth.reducers, { metaReducers: fromAuth.metaReducers }),

Once we have completed such a section we should add our store in our component just like any other service in our constructor:

private store: Store<AppState>

Coming from:

import { Store } from "@ngrx/store";