Course Code Tour

[00:00:00]
>> Lukas Ruebbelke: So hopping into the code, I believe I'm on master so I am going to,
>> Lukas Ruebbelke: Checkout start.
>> Lukas Ruebbelke: Here we go.
>> Lukas Ruebbelke: We're not gonna save this. All right, so let's start, and let's just look at the projects and component. And we're not going to change a lot of this.

[00:00:43]
Or rather everything underneath of the projects component itself. So I'll talk about some architecture here in a moment. But everything that we're doing is going to happen in the container component. And so we're going to leave the children, or the presentation components completely alone, so insomuch of this is we are only going to be refactoring the project component.

[00:01:05]
So, I'm going to start this up and while that is going. Let's look at this, so where we left this off yesterday is we have a project service that is making basic ACTP calls. And so you'll see what happen is you'll call the service and it'll return the pay load and you'll either in store this in the service or so you'll call ACTP it'll store it in the service or it'll you can put it in the component.

[00:01:40]
The problem is that if we go back to the projects component, that what happens is we pull this into this component if we need to use this data somewhere else. So, for instance, what if you wanted to maybe go to a home screen. And it also needed this project's collection that we're using over here.

[00:02:05]
Well because this is stored in the project's component in this case, that we would essentially have to pull that data down and get like a another collection and store this in home. Now what happens if in home somebody makes a change to that collection? Well of the sudden now you diverge and you no longer have a single source of truth.

[00:02:30]
And so just as shared mutable state is really, really bad. Having multiple states is also sub optimal. The reason being is that if something changes over here, how do you change it over here? And so this is a very common occurrence, when you have, for instance, two components that have the same data.

[00:02:57]
And one needs to change it here and either need to find a way to communicate that it changed or you need to coordinate the changes so that you don't blow it up over here. This can only go up to ten, this goes up to 11, you have problems.

[00:03:14]
And so one of the core tenants] of Redux and NGRX is that north state is in a single place. And so all your state goes into a single state free so now I'm actually taking, going from every service. Taking all of that state, every component and now you put it into a single object graph.

[00:03:41]
And so all your data is in one place. So remember I talked about state management? Flow of control and code volume. So now imagine just conceptually, how much easier is it to manage state, when all your state is in a single place all of a sudden that becomes a lot easier to work with mentally.

[00:04:01]
Not only that is imagine all the code across your services and your components used to manage and fetch those pieces of state. All of a sudden now that's condensed and if it's in only one place then you're not having to look over here, look over here, look over here but you're pulling it from one place.

[00:04:25]
And so now your flow of control becomes very simple. And so already we're seeing just by putting state management in a single place that your entire application then can pull state from, state management becomes simpler flow of control becomes simpler and your code volume starts to shrink. And so with that in mind single source of truth or store that now we get data from the store so it state flows down and when something happens it flows back up And so I will kind of talk about these core pieces as we start to build this out.

[00:05:09]
So let's go and let's do a quick tour of the application and where we're going to be working out of. So if you into the lib that there is a new folder in here and, it's the state folder. And so you could possibly organize, this slightly different depending on how you do this.

[00:05:31]
So typically, possibly in a lib I might actually have this services folder and I put my services feature organised that by feature. And in this case we have the state folder and we have customers and projects. And then within that also we have this top level index.ts. And so just to explain the pieces here, we have a very simple example with the customers just so we can see the pieces as we build the dow.

[00:06:07]
So in our index dot T S, we are producing a top level reducer. And so, under the hood we are saying, based on this reducer, create application state. And so you notice even here, that we are defining the shape of your application state in an interface. And then we are defining a reducer.

[00:06:36]
So, a reducer takes some action, it performs some calculation and then produces new state which we're saying this is going to adhere to this application stake here. And then as we start to build this out, we can start to combine these reducers to organizer state into various levels or features.

[00:07:00]
So in this case customers is the initial feature that we have. So all of the customers data is in the application store. And the only way that we can access it, or mutate it, is in or through a reducer. Which, we then come in to our core, or rather our state module.

[00:07:23]
And then we say store module for root, and then we pass in the reducers. And so what this is doing, this is telling the rest of the application that this is where the state's gonna pull from. And this is how you are going to access it, via the reducers.

[00:07:44]
So if we go into the projects this is what we are going to be building out. And the first thing that we'll build out is a basic reducer and more so initializing the store. So this is like ground, like ground one or step one, and this is the first thing that you need to do when you are integrating in GRX, so Is I'm doing this all again continue to talk about some of the pieces.

[00:08:17]
So if somebody's unfamiliar with Redux, I'll try to offer a helpful commentary along the way. There are as well some additional snippets in here, so one, some initial state. And then we have some immutable operations here that we'll hook into our reducers as we start to build the cell.

[00:08:41]
The main point is that everyone of these methods are performing an immutable operation. And so once we start to build out the reducers, I'll explain how and why these are immutable if somebody's maybe not familiar with that.