Wiring Store to a Component

[00:00:00]
>> Lukas Ruebbelke: So, from here, let me just pop into the store real quick. All right. So, again, if I'm looking at something, a lot of times it's a matter of habit, I'll click in and I'll look at the typescript definition, it's really interesting what you can find out. And so, the store.

[00:00:21]
Extends observable. So when you go store.pipe, like how is that working? Well, it's because it's extending and observable. And that's why we're able to pipe this observable operators together on your derivable string. How does your state go from one place to another? Well, it's an observable.
>> Lukas Ruebbelke: So, what you'll see here and this has been deprecated since 6.1 is there's kind of two main methods that

[00:00:59]
>> Lukas Ruebbelke: You will use when dealing with the store. So why I wanted to call this out, because I'm going to delete everything except for these two methods right here. So select and dispatch, and that is as far as I know I think that's all I have ever used in the store.

[00:01:26]
Is that you use select to essentially query your application state. And you use dispatch to say like, hey this thing happened or I need you to go do this thing and so you have dispatch. And so even the API for in JRX or Redux is very simple. When you're dealing with a store, there is really two methods that you'll use.

[00:01:50]
Querying via select, commands via dispatch. Then also notice that the state itself is an observable strain. So typically when I click into this, I learn something new, even the actions. And so all of the actions that we create, you'll see that those are in an observable stream as well.

[00:02:16]
So everything is essentially streaming down or up. So with that said, in our project, let's do, we'll go here. So we can take this
>> Lukas Ruebbelke: And we're going to replace this with this .store.dispatch and an action object has two properties. On this case it would definitely have two properties.

[00:02:55]
So, were gonna go type: 'create', payload: project.
>> Lukas Ruebbelke: And so what's interesting about this is that if we look at this other code down here, the component kind of knows a little bit about the implementation details of like where this is actually coming from in some of these different things.

[00:03:27]
Whereas this, on the other hand, when you look at this, it's just saying take this thing and get it out of here. Or just take this thing and you do what you want, so it's like my four year old when he's like hey, I just made a mess.

[00:03:43]
Clean it up. That would be the equivalent of a mess action object. What I'll do is so I just dropped these down here for now. Just because we'll keep those. These will eventually go away. So make a note of that.
>> Lukas Ruebbelke: All right, so let's go ahead and do update and delete.

[00:04:22]
So this.store.dispatch type,
>> Lukas Ruebbelke: Update, what's next, payload, project. So right now we are just using very generic, just essentially generic JavaScript objects, which could be problematic in the future. Hint, it will be, and I'll explain why in the next module. But for now, I think it's easy to visualize the shape of what we're working with.

[00:05:06]
Although here, we'll just said project updated and project deleted.
>> Lukas Ruebbelke: And so what we're doing right here is essentially when we're doing some kind of manipulation we're just saying, hey rehydrate the projects. There's a couple of ways you could do this and reset the current project. So ideally we would have this in one place.

[00:05:30]
Think about it that anytime the project is updated were there were some appropriate event that we'd just go ahead and rehydrate that for you.
>> Lukas Ruebbelke: What I will do is we don't need Get projects cause that is currently on hiatus.
>> Lukas Ruebbelke: Okay.
>> Speaker 2: Your type.
>> Lukas Ruebbelke: So do you see what happened?

[00:06:11]
I had this update and it's like, that's the wrong string.
>> Lukas Ruebbelke: This is one of the reasons why using generic JavaScript objects is problematic. Cuz it's easy to misspell a string or whatever.