Use the Angular CLI to Add NgRx to Your Project

Instructor: [0:00] We've got a simple Angular CLI application here. We want to be able to add ngrx to this application so we can add some state management to our to-dos here.

[0:12] To do that, there's a few different ways we could do it. We could either use regular old npm install and do the @ngrx/store package and add --save. That works fine.

[0:25] We could also do the same thing with yarn. I could say yarn add @ngrx/store. We want to use the ngrx/store package, the base package for ngrx, just for adding state management. We can actually do something a little bit better with the Angular CLI because we can do ng add with ngrx/store.

[0:48] This will not only install all of the packages that we need, but it will also do some setup for us. There's a bunch of different flags we could pass into it, but it's hard to understand what they do until you see what the base default command does. Let's run ng add @ngrx/store and see what happens.

[1:08] We can see that it's installing the ngrx/store package. After it does that, it does a little bit of extra work. Let's open up package.json and close the terminal for a second. You can see that it added ngrx/store to our dependencies, but it did a couple of extra things for us.

[1:30] First of all, it added this reducers folder with index.ts. Inside of index.ts, it imports a bunch of stuff for us from ngrx/store. It adds an empty state for us as our base reducers and meta-reducers. It then also adds ngrx to our app module.

[1:53] We have an import here of those reducers and meta-reducer we just saw, as well as the store module. It adds that store module for the root of our application and includes the reducers and the meta-reducers, as well as some default run time checks to make sure that we are enforcing some strict immutability.

[2:15] All of these things can be overridden with flags in the CLI. For example, if we didn't like that the reducers were in that reducers folder when we added ngrx/store, we could add something like state path and pass in a different path, maybe something like state, and that would change that folder.

[2:39] Likewise, if we didn't want it to do any of that extra setup for us, we could pass in a minimal flag that would only do the minimal setup. It would basically only register that store module for root that we see here, but it wouldn't set up anything else for us.

[2:57] There are several different flags I highly recommend you go and check out the docs, but that's the basics of the ng add command.