🎁

12 Days of Baddass Courses sale! Get instant access to the entire egghead library of courses and lessons for 58% off.

Runs out in:
13 : 08 : 50 : 20
Join egghead, unlock knowledge.

Want more egghead? It's 58% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 40% Off
1×
Become a member
to unlock all features
Autoplay

    Install and Use NgRx Schematics

    Sam JulienSam Julien
    ngrxNgRx

    In this lesson, you'll learn how to install the @ngrx/schematics package using ng add. This command will also make these schematics your default collection! Read more about NgRx schematics in the official docs.

    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: 0:00 When we want to add new files or features to an ngrx project, like actions or reducers, sometimes they can be a little tedious to just add a new file or copy and paste in. That's where ngrx schematics come into play.

    0:15 There's a package called NgRx Schematics. We could add that package the same way that we added the others. We could add with npm install @ngrx/schematics. We could do the same thing with yarn add @ngrx/schematics. Of course, probably in both cases, we would want to add the dev flag there.

    0:35 Again, we can save ourselves a little bit of time and legwork by taking advantage of ng-add and running that with the schematics, because when we do that, you can see that it's also going to add that package to our package.json.

    0:50 It's also going to ask us if we want to use the @ngrx/schematics collection as our default collection for the Angular CLI. This is really nice because we don't really want to have to specify if we want to add an action, we don't want to have to point to the @ngrx/schematics collection to add that.

    1:09 Let's clear this out and let's close these few things. Let's open up angular.json. Down at the end of the file, now you can see that it's added, the CLI section with defaultCollection @ngrx/schematics.

    1:24 This is really nice because now we could do something like ng generate action and pass in the name of our action. Maybe we want to call it Todo and we can just run that schematic. It's going to ask us a few questions.

    1:37 Do we want to generate success and failure actions? Sure, why not? Do we want to use the new action creators from NgRx 8 and later? Yes, we do.

    1:46 Now, if we go over to this new generated file, you can see that we've got a schematic that generated loadTodos, loadTodosSuccess including a payload and loadTodosFailure that includes an error payload.

    2:01 Notice that that createAction function there corresponds to that question that we saw in the schematic. This comes with NgRx 8. Now, we are set up with NgRx. We have all of our packages for the store and schematics. We're ready to add things like reducers and actions to our application.