Dispatching from Forms Solution

[00:00:00]
>> Does anyone want to take me through, anyone want to treat me like a small child and tell me what to do? What are we doing?
>> So first we need some sort of state to hold the current state of this input.
>> Okay, what should I call of that?

[00:00:14]
>> Let's say useState, for example.
>> Good, What should I set it to?
>> Let's set it for 0 for now.
>> 0, I like that, I'm signed on to that. And you'll call it count?
>> All right, yeah.
>> Yeah, so, All right, we've got that in place

[00:00:42]
>> They don't need to wind this value to the input?
>> Yep. All right.
>> And kind of only change that value.
>> So whenever it changes, we'll go-
>> And set the count whenever that change. The target value, All right?
>> And then on submit you need to kind of dispatch the set action to the store.

[00:01:16]
>> Call, so I'll call on useDispatch?
>> useDispatch.
>> So you've got useDispatch. And when the form is submitted we will go ahead and we'll dispatch the set of count, right? And we'll do with the count.
>> That's okay.
>> Awesome, so let's go ahead. Let's change this to, I don't know, 45.

[00:01:44]
And it works. We've got the ability to dispatch from a form now. Did anyone get to the little extension, which is, could I sync these two up? Right, cuz it's a little string, yeah?
>> We should pass our state to the initial state of the set counter component.

[00:02:03]
>> Whoa, I like this. So we'll put in that, Initial count. Is that useSelector then? Cool, so we've got that and I'll pass it in. All right, so I guess that gives it an initial load which will work. The one thing that I did to keep it up to date, did anyone get that part?

[00:02:44]
Or I can do the [CROSSTALK] down.
>> You need to have some sort of useEffect on it cuz-
>> Yep.
>> Whenever that changed, the whole code actually update the initial count.
>> So what we can say is useEffect and we'll say pass in a function, And we'll set the count that we made earlier with, well, let's call this one count from store now.

[00:03:18]
Cuz it's not really initial count anymore. And so here we will set it to, Count from store. And we'll do that whenever count from store changes. All right, so we've got that in place. So now we'll get it there initially. And it'll also change whenever the one in the Redux changes, but we can also modify it as well and change it ourselves, right?

[00:03:48]
So those are some of the peculiarities. So we've already mastered React. Well, yeah, React II, we've taken all of the courses. And we've mastered Redux as well. So now the big kind of last mile for us is all the kind of, how do they end to actually interact with each other.

[00:04:02]
In this case, we can still use components state to achieve certain features that we need to achieve that maybe, just React or just Redux by itself isn't necessarily gonna support. Let's just talk about a few small kind of refactoring that we could do here. And to be clear, I'm not necessarily sure that you need to do all of them.

[00:04:21]
I'm just gonna show you how some of this works. Mohammed, you had a question?
>> Can we use subscribe for the input, instead of using useEffect?
>> So subscribe, you would actually have to have access to the store itself. React Redux isn't gonna let you necessarily touch the store.

[00:04:35]
That's why if you look at that useSelector, useSelector allows us to get access to the state, but we don't actually have access to the store itself. We have useDispatch to dispatch actions to the store. We've useSelector to get the state from the store, but we can't necessarily access the store itself.

[00:04:51]
But we are getting the fact that the one thing that we care about, right, which is the count whenever it changes, we can use useEffect. So we don't have access to the full store. So we can't use subscribe.