We can definitely read State out of our Reduc store, which is fantastic.
Now we need to make sure that we can also update information inside the store as well.
So whenever a user starts to say.
Maybe type some text into a code editor or type some text into the text cell, make some updates to
it, we, of course need to make sure that we update the relevant cells inside of our reduc store.
And that, of course, means we need to dispatch in action.
Now, you might recall that we went over the process of dispatching actions with TypeScript and Redux
together much earlier ago.
Inside this course, you might recall that we very quickly ran into a little issue.
Let me just give you a quick demonstration.
You don't need to write this code out.
I just want to give you a quick reminder of something we had to write out that was kind of painful.
So wait, earlier inside the course, we had done something like import use dispatch.
From React Redux, and again, you don't have to write this out, I'm going to delete it very quickly.
We then imported action creators, we had given a lower case, a.
Store and then to actually dispatch an action, we had to write out something like CONSED, what was
it?
We had to first get dispatch that was right with dispatch and then it was dispatch action creators,
dot, whatever.
In this case, maybe, let's say we want to call update cell and then pass in some arguments in this
case, maybe the ID and some new content for it.
And so we very quickly said that despatching action in this way and having to write out this really
long line of code right here was just a little bit painful.
And so you might recall we had created a helper hook that just made it a little bit easier to get all
of our action creators automatically bound to the dispatch function for us.
And that just made the entire process of dispatching action a little bit easier.
So let's create that same exact hook, the same one we wrote previously inside this course.
We're going to write that out inside this video so that we can then start to make use of this hook across
some of our different components and update the state inside of a reduc store.
It's going to delete all the code I just put together.
I'm going to close that file and I'm going to go into our Hoke's directory and I'm going to create a
new file called Use Actions Sports.
So inside of here, we're going to import a couple of different things, and again, this is all identical
to what we did earlier on inside the course, we'll get used dispatch from React Redux.
Find action creators from Redux, and then we need to get access to all of our different action creators
from our state directory.
Now, at this point in time, we forgot entirely, or I should say I forgot entirely to export our action
characters from our state directory.
So we need to make sure that we take care of that very quickly inside of our state action creators index
exports while we are exporting all of our action creatures from this file.
Let's just make sure that these actually get exported from our index to file inside of state as well.
So inside of index states, we will very quickly toss in an export star as action creators from.
Action creators.
So let's save that.
Go back over to our U.S. actions hook, and now we should no longer be seeing an error message coming
from that important statement.
So then inside of here, we can do a export concert, use actions and remember, all we really have
to do inside of here is get access to the dispatch function by making use of use dispatch.
We're then going to bind all of our action creators to the dispatch function by using the BINDE action
creator's function.
So long story short, return find action creators.
But in our action, creators themselves.
And then provide the dispatch function.
Now, remember to make use of this hook, all we have to do inside of a react component is something
like Arnst update cell is use actions.
That's all we eventually have to write.
We can then call, update cell or whatever other action.
Cowriter, we want to call and just provide the relevant arguments to it.
So much easier than doing that dispatch action, krugersdorp, blah, blah, all that long stuff.
OK, so that's pretty much it, we've got this little helper hook put together, so we'll come back
to the next video and make sure that as a user starts to change some cell contents again, as I start
to say, maybe type inside of one of those code editors.
And again, I've got this darn error message where I've got an empty file.
I've got to restart my development server again.
We are going to make sure that whenever user types inside of the text or code editor, we're just going
to make sure that we update the state inside of our Reduc store.
OK, so again, this is a message, if you have it as well, remember, the only way you can get it
to go away is to restart your development server.
So just very quickly, last thing for this video.
I promise I'm going to go and restart my development server and then that error message should go away
in just a moment.
Well, let's take a pause right here and continue with a little bit more around Redox in just a moment.