State Shape, Initial State & Reducer

[00:00:00]
>> Lucas Ruebbelke: Okay, so now with that on the table, we've laid that foundation, let's go and let's build this stuff. So the first thing we're gonna do is we're going to integrate a new feature into NGRX. And so I've already done a little bit of this by having the customers in place.

[00:00:21]
But we are going to add in projects. So the first thing that you do when you are breaking ground on this is I define the shape of my state. And so this is going to be, export interface, and we'll call this ProjectState.
>> Lucas Ruebbelke: And so now, we can stop and think, what do we want this to look like?

[00:01:00]
>> Lucas Ruebbelke: We'll start out with projects, so obviously if we're going to work with project state we probably want to have a collection of project, so we'll go, project. Just import this in and let's go with as well, let's keep track of when you select a project. Now what we're gonna do is we're not going to keep track of the entire project object itself because if I were to store the project.

[00:01:30]
Like you selected a project and I were to store that in selected project, now, I basically like state is in two different places. And so what you really want to do is just store a reference to this, and so this is gonna be string, or this will be null.

[00:01:49]
So this is what the state for our projects feature is going to look like. And then from here, the next thing that I like to do is define the initial state. Now, if we define the shape of our state, you can imagine that our initial state is going to adhere to that.

[00:02:16]
So export const Initialstate, and this is going to be of ProjectsState. And so now we need to satisfy this. So projects, add this initial projects up here, and so I just went ahead and seeded this. So start with this hard-coded data and then we'll hook this back up a little bit later through effects.

[00:02:48]
And we'll go,
>> Lucas Ruebbelke: initialProjects. And then from here let's go with selected ProjecstId, [INAUDIBLE] ProjectId and this is just gonna be null, there we go. So this is an interface and this is an object that implements that initial state. Obviously, you can see that they're pretty much in lock step.

[00:03:30]
So the next thing that we're going to do is build a very, let me do this, build the most simplest reducer.
>> Lucas Ruebbelke: Now a reducer is just a function that takes two parameters, so we'll call this project reducer and,
>> Lucas Ruebbelke: It takes state, so you're always giving it state, and we're going to set this to initialState, and it takes an action.

[00:04:20]
>> Lucas Ruebbelke: So when you call a reducer, you're saying, here's our application state and here's an action object that defines what just happened, so the type of action. And then usually it will have a payload, saying, this needs to happen or this is what happened. So for instance, I want to create a project so it's of type CreateProject.

[00:04:43]
And then the payload would obviously be a new project. And so from here, let me just break this onto another line here so it's a little bit easier to read
>> Lucas Ruebbelke: It always takes state and it will always return state. So I know it's saying, but you're not doing that, no, but wait, and so we'll have a switch,

[00:05:14]
>> Lucas Ruebbelke: Case here and we'll go action type. And then we're just going to set default. And so if there's not a match on the action type, it's just going to say, I personally cannot do anything with this, I'm not going to pass this along, return state, okay? So just to summarize, we define the shape of our state, so this is what we want our table to look like.

[00:05:43]
Here is the seed data, and then this is how we're going to control access to the store. In this case, state comes in and we're just sending it back out. So right now, we're just using this to essentially initialize that basic state.