1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Course Overview: Reactive State Management in Angular with ngrx

    Lukas RuebbelkeLukas Ruebbelke
    angularAngular
    ^7.0.3
    ngrxNgRx

    State management is one of the most challenging aspects of building any non-trivial application regardless of the framework. Most developers do a pretty good job of achieving significant functionality through stateful services in an Angular application but find that things get really complicated really fast. In this course, we are going to learn how to convert an Angular application using stateful services to using ngrx for state management. Through this process, we will learn how to set up the ngrx store for a feature, build out the reducer, use typesafe actions, manage collections with ngrx entity, query our state with selectors, use effects for async operations, level up our HTTP calls with NRWL Data Persistence, handle relational data with selectors and hide ngrx implementations details with the facade pattern.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: In this series, we are going to learn how to integrate NgRx into a fully working Angular application. I find that most developers who've worked with Angular for some time, they're very good at creating components, creating services, communicating to a back-end with those services, but I believe that they find very quickly there is a threshold of complexity.

    As their application starts to grow and they start to manage state across multiple services, that becomes very difficult. What we have in this application is we have a component that is communicating directly with a service, which is then taking that data. It is binding to the view layer of a component.

    This is a master-detail view, which is a perfectly commendable milestone in terms of application development. But again, as you start to grow in complexity, you need a better way to manage state and to find a way to replace these service calls with something that's a little bit more predictable and simplified.

    Through this application, we are going to, piece by piece, replace these calls and this pattern with NgRx from actions, effects, reducers, entity, and even the facade pattern, which I am a huge fan of. I went ahead and laid some of the groundwork for us by introducing the top-level reducer, store dev tools, as well as even a basic effects component here.

    We go over every piece and how to put this together, so that as a developer you will have all the tools you need to take a stateful service Angular application and integrate NgRx and understand what those components are as you start to build your application out.