NgRx Tutorial Series

by | Feb 13, 2019

NgRx (Reactive Extensions for Angular) is becoming increasingly popular in the Angular community.  It is a great way to manage state using the redux pattern and keep your application scalable.  This series, by Intertech developer Rich Franzmeier, is for beginners and those experienced with NgRx alike, walking readers through the basics of NgRx while also diving into more advanced concepts.  Let’s dive in.


NgRx 5-Part Tutorial Series


NgRx Tutorial - Adding NgRx to Your Angular 6 ProjectAdding NgRx to Your Angular 6 Project

The series kicks off covering how to get up and running quickly with NgRx by using the @ngrx/schematics package This package enhances the Angular CLI with new commands for NgRx.  No knowledge of NgRx is necessary to read this post and setup your project.

NgRx Tutorial - Actions, Reducers, and EffectsActions, Reducers & Effects

Part two of the series focuses on actions, reducers and effects.  These are the heart and soul of your NgRx code and will be the ones you use most on a day to day basis.  You will learn what they are, how to generate them and how they work together in an Angular application.


Accessing StateAccessing State

Our series continues with showing how to access state in the store by using selectors.  This addresses the missing piece of the circle that started with dispatching an action, then an effect doing asynchronous work, and finally the reducer updating state in the store.


NgRx Tutorial 4: Add State to Feature ModuleAdd State to Feature Module

Feature modules are Angular modules that group a bunch of components/services, etc. into a module.  This allows us to separate concerns nicely.  Most likely, you’ve dealt with feature modules if you have 1-month experience in Angular.  Since feature modules can be lazy loaded and because they are separate from the main app module, NgRx does things a little differently.  In this post, you’ll learn how to set up a lazy loaded feature module with NgRx.


Add Router Info to State NgRx Tutorial 5: Add Router Info to State

Adding Angular router information to state is very important for NgRx.  Why, though, does it matter if the Url, parameters and query parameters are stored in state?  Good question!  In our final post of the series, we tackle the answer to this question by building upon the code that has been written in the previous four posts on NgRx.



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

NgRx Tutorial SeriesWant to share this tutorial 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