NgRx Store: The Setup

This post will NOT cover the details why you need a central state management system, we just do the setup for a small demo.

The end result will show our customers as a list of buttons and when you click 1 of the customers it is shown at the bottom. So it is a very simple problem, but the same can be implemented in more complex scenarios.

So here we go… Create a new Angular app:

Navigate to the newly created directory and install the store components:

In our example below we need a customer object that will be defined in the file ‘/src/app/model.ts’:

Next we create a directory where we will place all code for the store:
/src/app/state

Now decide for which features you need to store state (examples could be: customer, product, order). Then each feature can keep track of 1 or more state properties (example: for the customer feature we’ll keep track of: allCustomers  & selectedCustomer).
Create for each feature a sub directory in the state folder and create the corresponding action and reducer typescript file (feature-actions.ts & feature-reducers.ts) :

For our example we will create the following structure:

 

In this setup you have one reducer file per feature. If you have more reducers for a certain feature you could also create separate files for each reducer. Now you should define your actions inside the ‘feature-actions.ts’ Typescript file. You could line-up all your action(types) as a set of strings, but we try to do it more intelligent by defining our actions inside a class. Here’s an example of our customer-actions.ts file:

For each action we have a string property with the name of the action and a method that will create an action with the correct payload. The benefit of doing it this way is that we have typed methods to create action objects.

Next you need to setup your reducer(s) for the feature at hand. Each reducer will calculate the next state for any given action. Here is an example:

Now you can boot your store from within your module definition (/src/app/app.module.ts):

1. Import the store:
   
   import StoreModule

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

   1	import { StoreModule } from "@ngrx/store";

2. Import all your reducers:
   
   import all reducers

   import { CustomersReducer, SelectedCustomerReducer } from "./state/customer/customer-reducers";

   1	import { CustomersReducer, SelectedCustomerReducer } from "./state/customer/customer-reducers";

3. Setup your store by adding an element to the imports section of your @NgModule:
   
   @NgModule imports

   @NgModule({ imports: [ StoreModule.provideStore({ customers: CustomersReducer, selectedCustomer: SelectedCustomerReducer}) ] })

   1 2 3 4 5

   @NgModule({ imports: [         StoreModule.provideStore({             customers: CustomersReducer,             selectedCustomer: SelectedCustomerReducer})     ] })

As from now you can use the store from within any component or service. As an example we will update the component located at ‘src/app/app.component.ts’ in order to:

1. Show all customers as buttons
2. Be able to select a customer

Add the following imports:

And now update the component:

At the same time we bind the property ‘customers’ from the store with a local (observable) property ‘customers’ and the same for ‘selectedCustomer’. And we request the store to load the customers by dispatching the correct action.

Now add the following html to ‘app.component.html’:

Now execute “ng serve” at the command prompt and you should see: