NgRx Tutorial Series
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
Adding 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.
Actions, 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 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.
Add State to Feature Module
Add State to Feature ModuleFeature 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
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
Want 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.
