Understanding ProvideStore() in Ngrx/Store

This post is meant to explain some of the magic behind the line of initialization code for Ngrx/Store that you put in the imports block of the NgModule. Working with provideStore is key to understanding how to setup your project wiht Ngrx, so let's get into it!

---

StoreModule.ProvideStore

In the app.module file of your application you should have something like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, in order to let our application know that we want to use Ngrx we just need to add one line to our imports array (not including the import statement at the top of the file bringing in StoreModule from "@ngrx/store"). The line we'll add looks something like this:

 StoreModule.provideStore({myReducer}),

The providerStore function takes an object of one or more reducers (functions of type ActionReducer). ProvideStore also takes an additional optional argument which is an initial state to use. I tend to leave this argument off and just provide an initial state to each reducer. Remember, our reducer function looks something like this:

export const myReducer: ActionReducer<AppState> =
  (state = intitialState, action: Action) => {
    ...
  }

In the code above we're exporting a constant myReducer, which is of type ActionReducer, and I'm telling it that this ActionReducer takes a State defined by my interface AppState which looks like this: 

export interface AppState {
  user:User,
  bullets: Bullet[]
};

Notice that this AppState interface is built from two other custom types: User and Bullet. I've also defined interfaces for them, and they look like this:

export interface User {
  name: string
  xPos: number
  yPos: number
};

export interface Bullet {
  xPos: number,
  yPos: number,
  shotBy: string
};

And I'm also defining an initial state which looks like this:

export const intitialState: AppState = {
  user: {name: 'Jim',
    xPos: 0,
    yPos: 0},
  bullets: []
};

---

That's It!

Well, that's all there really is to setting up Ngrx and using provideStore. Now in your smart component or service you can inject store, dispatch events to your reducers, and subscribe to slices of the state like this:

constructor(private http:Http, private store:Store<GlobalState>) {

this.store.select(s => s.myReducer.user)
  .subscribe( (data:any)=> {
    console.log('app component got reducer\'s state: ' + data);
  });

this.store.dispatch({type:INCREMENT});

}

And remember, the global state is created from the state of each of our reducers that we pass into provideStore. Since we're only providing one reducer in this case our GlobalState would look like this:

export interface GlobalState {
  myReducer: AppState
}