NgRx (Reactive Extensions for Angular) is becoming more and more popular in the Angular community.  It is a great way to manage state using the redux pattern and keep your application scalable.  When I first started using it, my biggest complaint was that it was a lot of typing basically the same thing over and over.  Thankfully, the NgRx team addressed this with @ngrx/schematics.  This package enhances the Angular CLI with new commands for NgRx.  For example, to create a new actions file, simply type:  ng generate action ActionName

This post is meant to help you get up and running quickly with NgRx by using the @ngrx/schematics package.  It is using NgRx version 6.01 so if it doesn’t look the same to you, it could be things have changed.  No knowledge of NgRx is necessary to read this post and setup your project!

UPDATE

Thanks to reader baerree for the comment about using the “ng add” command to achieve most of the things done using schematics in this article. Run these commands for an existing project that doesn’t have NgRx:

ng add @ngrx/store
ng add @ngrx/effects

After this completes, the only things necessary to do in this article will be the following:

• Setup – under here, you may want to install the rest of the ngrx tools
• NgRx Startup Code
• Store Command – under here, you’ll have to add the “reducers” folder to a “store” folder to get the same structure as in the post
• Effect Command – under here you’ll have to add the “effects” folder (which wasn’t added for you) to a “store” folder to get the same structure as in the post

Before we jump in, here are a couple links to other NgRx tutorials I have written:

• NgRx Tutorial: Actions, Reducers and Effects
• NgRx Tutorial: Accessing State in the Store

Setup

I start by creating a project using the standard Angular CLI command:

ng new ngrx-tutorial

This will give you the standard Angular starter project.

Now let’s install the NgRx schematics package:

npm install @ngrx/schematics --save-dev

Install the rest of NgRx:

npm install @ngrx/store @ngrx/effects @ngrx/store-devtools @ngrx/router-store --save

NgRx Startup Code

Now that the project is setup and we have NgRx installed, we are ready to see the power of Schematics.  Before we start running schematic commands, we will register it as the default collection in the Angular project by using this command:

ng config cli.defaultCollection @ngrx/schematics

Running this command adds the following to the angular.json file:

Store Command

ng generate store State --root --statePath store/reducers --module app.module.ts

This command did the following:

• Created a ‘store’ folder at the app level
• Created a ‘reducers’ folder in the ‘store’ folder
• Created an ‘index.ts’ file in the ‘reducers’ folder
  • This is the main reducer file for the root store (as opposed to feature store(s)) which contains:
    • State interface definition (empty)
    • reducers – ActionReducerMap (empty)
    • metaReducers – MetaReducer<State>[]  (empty)
• Imported the following to the AppModule:
  • StoreModule.forRoot(reducers, { metaReducers }),
    • Prepares the app for reducers and metaReducers
  • !environment.production?StoreDevtoolsModule.instrument() : []
    • Instruments the app for development

If I run “ng build” now, I get an error:

ERROR in src/app/app.module.ts(8,29): error TS2307: Cannot find module ‘../../../environments/environment’.

Ok, so the schematics aren’t perfect.  I think this is because I put the index.ts file two levels deep from ‘app’.  To fix this simply go to app.module and remove two levels of relative path for this import:

ng generate effect store/App --group --root --spec false --module app.module

We’ve Made it Easy to Share this Tutorial with Your Team

Want to share this complete tutorial series with your team?  We’ve converted the entire series into a downloadable eBook, making it easy to share the tutorial with your colleagues and reference back to it when needed.  Click on the button below to get a copy of the NgRx tutorial series eBook delivered straight to your inbox.

Download Now