Ultimate NGRX: Integrating @ngrx/router-store

so in this next chapter we're going to introduce ng rx Rooter store now we haven't touched this just yet however what it allows us to do is bind the representation of the routes and the route of state to the actual ng rx store so this gives us much more power when it comes to composing selectors so for instance when we click on a particular pizza we know that we have the number 1 in the URL which corresponds to the idea of this pizza similarly if we click on this one we have number two now what we actually want to do is find this route estate to our application state so we can just treat this as one source of truth like we talked about right at the beginning of this course everything is a single source of truth even the URL now what we can do is introduce ng rx is Rooter store and it will automatically bind this state to our store for us so that's what we're going to do we're going to set things up then we're going to create a few selectors to allow us to actually select via our store the current pizza that we are on on a page and then we're going to talk about how to refactor our selectors so we can make them a bit more neat and a bit more organized so first thing is first if you jump into the app folder we're not going to use this products for now however what we want to do inside of here is again set up a store folder where we can manage things like our reducers and the actions and the effects so we keep things consistent in both folders we have the store inside of here and the store inside of here so we want to keep our patterns the same we keep things predictable so we'll create a new folder and we call this one the reducers now inside of the reducers we'll create an index dot es and what we're also going to do in this store folder is create another index dot es and inside of it what we want to do is export everything from our reducers file so at the moment we don't have anything it will say that the module doesn't actually exist so we can save this out for now and when we actually export something so we could say export Const a equals and that will then fix this issue so we can save that and we can undo those changes so this is where we're gonna be working for most of this video and we want to essentially set up the state of what the Reuter state will look like so at this point in time what we're going to do is say export an interface and we're going to call this D state so we actually initialized our store module if you remember right at the beginning we walk through this file and we see that we have store module for route and we just have a plain empty object now this means that we're initializing our route of the state of the application however we're not actually using any reducers so this is a great place our app module where we can keep track of the Reuters State which allows us to then use it in feature modules such as our products so we can always know where we are at a point in time but that's what we're going to learn how to do we're going to say export the interface of state is going to have a property called the Rooter reducer on it now the ngrick route of store project requires you to actually do this so we need to supply the word of Rooter reducer we need to keep that as the key on our state now before we can actually bind anything we need to import the package so let's go and import everything from the Rooter we'll call this and we get that from a 10 gr X and you can see that the second choice here is that route of store so now what we can say is from Rooter dot and this gives us the Rooter reducer state so what we're saying here is the route of store package is essentially giving us this state representation which means that we can actually export some new reducers so we can say export contra juicers equals a new object and we're going to say that the Rooter reducer from rooster dot and what we actually get given here is the Rooter reducer so the route of store package gives us all of this for free we just simply import it and we bind it to our route reducers which we've called the route reducers because it's going to live inside of our app module at the root of our project it just so happens that it includes a Rooter reducer now there's a few more things that we need to do to get this set up properly one of the first things that we need to do is actually define what this route of state is going to look like so what we're going to say is export an interface and we're going to call this the Rooter State URL now some of this code actually lives inside the ng rx documentation for this however this works very nicely and this kind of gives you everything you need to get started and binding custom properties or query parameter or other params to our state of our ng rx store so what we're going to actually ask for is the URL and that's going to be a string we're also going to ask for the query parameter and so what we can do is ask to import that from angular slash Rooter and we could just remove this because we don't actually need this piece what I'll do is just pass that up the top so we can keep that out of the way so we're also going to say that we have the params as well which are going to be of type params so we could have a query parameter just have a normal Paramus NJ s to our state tree now the Rueter reducer state at this point actually accepts a generic type so we can say ruta state and then URL so this is in fact typing to say that our route a reducer which we are essentially being given here is going to actually be conforming to this object here so we're only going to supply the URL query parameter params the next thing that we're going to do is a bit more setup so we want to actually type this reducers which we're not doing at the moment now this is actually an action reducer map so we can say import the action reducer map and we get that from our ng rx store so we can save that everything's done nicely we can then pass this to our reducers so we can say action reducer map and we can type that with our state so we're passing the generic type into here because this is a state for our application then these two essentially are now matching up they work in tandem and we're just safety checking that when we add this action reducer map as a type much like in our other reducers we also want to create a selector so that we can ask for this particular piece of State so we're going to say export Const and then get the Rueter state so this will actually allow us to then add this get Reuter state to another selector inside of our products folder so we want to use the create feature selector we can hit this and that will then be imported from ng rx store what I'll do is just add this at the top because we've already imported something from ng rx store so we can actually just combine these into one and now we need to create a new feature selector we can simply call this as a function and say Reuter reducer now again we can add some more typescript to this if we need to so what we're going to do is bump this on to a new line now the generic type for this we can then say it's going to be from Reuter and the Reuter reducer state which then again accepts another generic type of Reuter state URL so this is making sure that we've typed things correctly we don't have to add this line but we are just making sure that we can only tell the create feature selector that you can access some of these properties on the root of reducer so now that we've done this what we can do is jump into our app module and we just want to register this reducer inside of here let's go up to the top and underneath our store and effects imports what we're going to do is similar to what we've done in the other module where we import the reducers and we get that from forward slash store so now when we click through we can see that these are the reducers with the route of reducer that we just set up so we can close that off and go back to our app module so now that we've imported the reducers what we can do is go down and actually add this and replace our for root with our new reducers so we're not going to check this in the browser yet because there's actually one more step that we need to make and that's how we take the root of State the root of store package gives us the capability to do this but we need to actually supply a function which we call a custom serializer so we'll do this in the next video and I'll see you there

Channel: Todd Motto

Views: 21,896

Keywords: angular, ngrx, rxjs

Id: YsG44g6_Fo0

Length: 9min 33sec (573 seconds)

Published: Sun Dec 03 2017