Wiring Up the NgRx Store

[00:00:00]
>> Lukas Ruebbelke: So in the barrel rule for this lib, I'm going to be in here a couple of times because we're building this in pieces that I'm going to be having to export pieces and then consume it into our application. When we get to facades, we're gonna bypass all of that.

[00:00:17]
But for now I'm having to just so you understand why I'm hopping into the index.tx kind of barrel role for this lib is because I am exposing specific pieces as I create them. So, in this case, we are going to export projects state from,
>> Lukas Ruebbelke: Lib/state/projects.
>> Lukas Ruebbelke: Where'd my Intellisense go?

[00:00:57]
Not helpful, there we go.
>> Lukas Ruebbelke: Okay, so now this is available for, essentially, or basically I'm exposing it to any other module, or project that I want to use. So,
>> Lukas Ruebbelke: We'll go project state. One other thing that I will point out is that, if we were doing this from complete scratch, that we would need to come into here and build, well, actually build these three pieces out.

[00:01:36]
So, I'll just comment these out and talk about them real quick. So Store module for route. We're simply saying take the reducers, all the combined reducers and make it available. And so there's some things, some initialization things, and kind of some connections that happen as well as the observables are whiled up.

[00:02:03]
What we have here is StoreDevtoolsModule. And so what this does is this actually hooks into the Redux DevTools in Chrome which is amazing. It's almost we actually get this up and running, or you'll see how that state will flow through from the browser. But as well, if something goes wrong, it's really handy to be be like, what's happening?

[00:02:22]
You can actually step through the Devtools. So I would say as awesome as I think Redux is, I think the Redux Devtools is just one of the greatest magic tricks ever for being able to step through and I know exactly what is happening to my application at any given time.

[00:02:42]
And then when we have here I could have saved this to later. Well, no, I actually I need this is we just have the effects module. So as you create effects, then you need to add them in here, okay. So, with that said, let's hop into our component.

[00:03:07]
>> Lukas Ruebbelke: Inside of our projects component we are going to start to wire this up. So let's go.
>> Lukas Ruebbelke: I'll just put this in as a parameter, so we'll go,
>> Lukas Ruebbelke: Private store.
>> Lukas Ruebbelke: Store, let me just check my import here, perfect. And so we're going to import the store and so this is why in index.ts in that barrel role, I had to export this so that,

[00:03:54]
>> Lukas Ruebbelke: I could say that this is a store that has ProjectState. All right, so now within our constructor, we can do this here
>> Lukas Ruebbelke: If we have,
>> Lukas Ruebbelke: In our reducers, we've added in this initial project state. The next step that we want to do is, we want to pull this off.

[00:04:22]
So in our project's component, what we can do is,
>> Lukas Ruebbelke: All right, that's already there. So we're gonna set projects$, it's going to be observable with projects in it and then I will send it here. And then I will turn it off in the other place. So we're actually getting it from the service although this project = store and so this returns an observable string which then we put into a pipe operator.

[00:05:05]
And from here, we're going to select, now what feature are we working with, projects? And so we're going to say give us the entire project state, and you know what? I'm going to leave this like this for right now so that I can actually walk through what's happening and you can see.

[00:05:29]
So I'll go through and let's go to getProjects and I'm just going to comment this out. So we're no longer going to call the project service which is then going to make that HTTP call. It's now going to be coming in via the store. But let me hop in and update the projects component here, we're just going to comment this list out

[00:06:02]
>> Lukas Ruebbelke: And instead preproject. Now one thing we need to do, or rather, because this is async, so it's an observable, we'll go async | json, like so.
>> Lukas Ruebbelke: And we'll save this. And so I'm just wanting to dump what's coming off of the store. So in the core data module we need to import our state module.

[00:06:37]
>> Lukas Ruebbelke: Let's save this.
>> Lukas Ruebbelke: You'll notice that the object that we got back is the entire application state for the projects. So we have projects, selected project ID, as you would expect. In fact, I'll pull up the dev tools here so I have the Redux Chrome dev tools and if you look here.

[00:07:10]
Let's just refresh this, initializing the store, initializing effects. More importantly, if we go over to State, let me just bump this up. This is where it's gonna get kind of weird. There we have customers and we have projects. In projects, if we look through this pinhole here we have our projects and our project ID.

[00:07:36]
So we're able to in from our browser kind of trace this out and see it. If I put this back down, there you see it a little better. So this is our entire state tree customers, projects like so. Now if we go over to our code, what we need to do is inside of our projects component, we're going to go ahead and let's just pull off the project itself.

[00:08:06]
So we'll go Map, and we'll take projects, or rather we'll go when I'm working with observables, I like to make my parameters kind of be self documenting of what's actually going to the string. So I know that if I select projects, I'm getting projectsState. And then from here, we can just return projectsState.projects

[00:08:49]
>> Lukas Ruebbelke: And I could probably even strong type this.
>> Lukas Ruebbelke: Do I need to import this? Probably.
>> Lukas Ruebbelke: There we go, so let's see it in the browser. Now we have just projects and from here I can go into projects component. I can uncomment this and delete this.
>> Lukas Ruebbelke: So now we're pulling it off of the store.

[00:09:34]
So now we're moving this from hey, lets go get this from some remote service and lets feed it in and lets hold state. Is that we've moved it out of the component into the store and we're just selecting it and bringing it in. So in the projects component, just to summarize is that we've injected the store and than within from the store we're saying I want to select project state.

[00:10:02]
And than off of project state I want to pull just the projects from that and than it's feeding this into this project's observable, so that any time this updates projects in the store it's going to feed in and then update the underlying components. And so this is from kind of ground zero how you would integrate or add a new feature into your application using ngrx from creating the reducer to adding it to the top reducer and defining the state for that feature and then adding it and updating your application state.

[00:10:47]
So, what's interesting about Redux is it's an incredibly simple pattern. That anyone of us could sit down and write in implementation of it, in about 10 minutes. And so obviously with Redux capital R and ngrx there's some additional things, but you could write a basic implementation of Redux in ten minutes or less.

[00:11:11]
I mean it's very, very simple. And so this is, when I think of the genius that is Dan Abramov is that he basically took kind of two design patterns, put them together, and created something that has completely inverted how I think about application development. And he's done it in maybe less than 100 lines of code or whatever, it's very very small, which is incredibly interesting.