ngrx Overview

[00:00:00]
>> As angular developers, do understand inputs and outputs. That we have a template, we have a class and we pass data from the class to the template via property binding. And we pass events from the template back to the class via event binding. So welcome to our summer angular workshop circa 2017.

[00:00:21]
What we can do in angular, is we can define custom data binding. So we can say that,I want you to find a custom input from this component to this one. And I wanna listen to a custom output from this child component into the parent component. We should all know this.

[00:00:39]
And so what this does is it creates a relationship of you have a parent on top, and then you have a child and they share the same surface area. So the parent can send data into the child, a property, if you will, into the child via input. And the child can send events back to the parent via an output so that the parent can then handle that.

[00:01:10]
So parent property in event out. Input in, output out. And so it looks like this properties, data, goes down, events flow up. Input, output. So what this allows us to do is that it defines a component contract between a parent component and the child component. I feel like I was just talking about contracts.

[00:01:50]
And so data in events out State flows down. So you have a container component, you get the data and you feed it into the presentation component events flow up. So something happens. The presentation components in, hey, route, this event container it's like, okay. Processes event sends it up.

[00:02:20]
So now with that said, you basically understand redux. The difference is that you have redux the pattern that so the API is identical. But NTRS, uses observable streams under the hood, aka a subject or behavior subject. In this case, at least it was the last time I checked to communicate events and move or facilitate that control flow.

[00:02:55]
So you take redux. Angular RSDs. You mash them together on love Island. And what you get is this beautiful baby child. Known as NGRX. And so state flows down from the store to the service, which I would consider a facade in this case, into the component class, into the template.

[00:03:18]
And then from the template events flow up from the template component class, into the facade into and it also could be an effect into the store with the store being the single source of truth. And so this is one way of thinking about it. You have the store that surfaces data to the component via the selector.

[00:03:40]
A component communicates events via actions into the reducer, which then modify state in the store. If you need an asynchronous event, for instance, you need to call a service, then that same action object can go to an effect to the service, change something and come back. And so that is really about the shortest possible version that I could state.

[00:04:12]
And so with that said. Let me just verify what branch I'm on in all of this is in the code base. So,what I'm going to show you please pull this down. And I feel like in some ways I've given you like a month's worth of homework to go over in a matter of just a single day.

[00:04:39]
So, within this, I'm going to close all this down and we're going to core States, specifically the widgets. And let's walk through these pieces and I'm going to start from the simplest pieces and we're going to expand out to what I consider to be the most complicated piece in the entire thing.