1
00:00:01,390 --> 00:00:04,630
We can definitely read State out of our Reduc store, which is fantastic.

2
00:00:04,780 --> 00:00:08,200
Now we need to make sure that we can also update information inside the store as well.

3
00:00:08,650 --> 00:00:11,710
So whenever a user starts to say.

4
00:00:12,850 --> 00:00:18,820
Maybe type some text into a code editor or type some text into the text cell, make some updates to

5
00:00:18,820 --> 00:00:22,860
it, we, of course need to make sure that we update the relevant cells inside of our reduc store.

6
00:00:23,110 --> 00:00:25,960
And that, of course, means we need to dispatch in action.

7
00:00:26,520 --> 00:00:30,520
Now, you might recall that we went over the process of dispatching actions with TypeScript and Redux

8
00:00:30,520 --> 00:00:32,580
together much earlier ago.

9
00:00:32,590 --> 00:00:36,830
Inside this course, you might recall that we very quickly ran into a little issue.

10
00:00:36,850 --> 00:00:38,350
Let me just give you a quick demonstration.

11
00:00:38,350 --> 00:00:39,400
You don't need to write this code out.

12
00:00:39,400 --> 00:00:43,690
I just want to give you a quick reminder of something we had to write out that was kind of painful.

13
00:00:44,290 --> 00:00:49,150
So wait, earlier inside the course, we had done something like import use dispatch.

14
00:00:51,340 --> 00:00:55,020
From React Redux, and again, you don't have to write this out, I'm going to delete it very quickly.

15
00:00:55,920 --> 00:01:00,960
We then imported action creators, we had given a lower case, a.

16
00:01:03,750 --> 00:01:11,400
Store and then to actually dispatch an action, we had to write out something like CONSED, what was

17
00:01:11,400 --> 00:01:11,550
it?

18
00:01:11,970 --> 00:01:19,050
We had to first get dispatch that was right with dispatch and then it was dispatch action creators,

19
00:01:19,050 --> 00:01:20,010
dot, whatever.

20
00:01:20,010 --> 00:01:25,650
In this case, maybe, let's say we want to call update cell and then pass in some arguments in this

21
00:01:25,650 --> 00:01:27,750
case, maybe the ID and some new content for it.

22
00:01:28,060 --> 00:01:32,220
And so we very quickly said that despatching action in this way and having to write out this really

23
00:01:32,220 --> 00:01:34,800
long line of code right here was just a little bit painful.

24
00:01:35,280 --> 00:01:39,780
And so you might recall we had created a helper hook that just made it a little bit easier to get all

25
00:01:39,780 --> 00:01:43,770
of our action creators automatically bound to the dispatch function for us.

26
00:01:44,010 --> 00:01:47,970
And that just made the entire process of dispatching action a little bit easier.

27
00:01:48,610 --> 00:01:52,560
So let's create that same exact hook, the same one we wrote previously inside this course.

28
00:01:52,770 --> 00:01:57,010
We're going to write that out inside this video so that we can then start to make use of this hook across

29
00:01:57,010 --> 00:02:00,720
some of our different components and update the state inside of a reduc store.

30
00:02:01,380 --> 00:02:03,030
It's going to delete all the code I just put together.

31
00:02:06,780 --> 00:02:11,760
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

32
00:02:11,760 --> 00:02:15,060
new file called Use Actions Sports.

33
00:02:16,200 --> 00:02:20,700
So inside of here, we're going to import a couple of different things, and again, this is all identical

34
00:02:20,700 --> 00:02:25,380
to what we did earlier on inside the course, we'll get used dispatch from React Redux.

35
00:02:26,710 --> 00:02:33,850
Find action creators from Redux, and then we need to get access to all of our different action creators

36
00:02:34,360 --> 00:02:36,790
from our state directory.

37
00:02:37,550 --> 00:02:42,770
Now, at this point in time, we forgot entirely, or I should say I forgot entirely to export our action

38
00:02:42,770 --> 00:02:44,900
characters from our state directory.

39
00:02:45,080 --> 00:02:49,720
So we need to make sure that we take care of that very quickly inside of our state action creators index

40
00:02:49,730 --> 00:02:53,930
exports while we are exporting all of our action creatures from this file.

41
00:02:54,320 --> 00:03:00,130
Let's just make sure that these actually get exported from our index to file inside of state as well.

42
00:03:00,860 --> 00:03:09,410
So inside of index states, we will very quickly toss in an export star as action creators from.

43
00:03:10,940 --> 00:03:12,110
Action creators.

44
00:03:15,920 --> 00:03:16,670
So let's save that.

45
00:03:18,910 --> 00:03:22,930
Go back over to our U.S. actions hook, and now we should no longer be seeing an error message coming

46
00:03:22,930 --> 00:03:24,040
from that important statement.

47
00:03:24,950 --> 00:03:31,250
So then inside of here, we can do a export concert, use actions and remember, all we really have

48
00:03:31,250 --> 00:03:36,020
to do inside of here is get access to the dispatch function by making use of use dispatch.

49
00:03:39,910 --> 00:03:45,920
We're then going to bind all of our action creators to the dispatch function by using the BINDE action

50
00:03:45,940 --> 00:03:46,980
creator's function.

51
00:03:47,530 --> 00:03:51,910
So long story short, return find action creators.

52
00:03:53,060 --> 00:03:54,890
But in our action, creators themselves.

53
00:03:56,140 --> 00:03:58,090
And then provide the dispatch function.

54
00:03:59,580 --> 00:04:03,480
Now, remember to make use of this hook, all we have to do inside of a react component is something

55
00:04:03,480 --> 00:04:08,150
like Arnst update cell is use actions.

56
00:04:08,190 --> 00:04:09,560
That's all we eventually have to write.

57
00:04:09,900 --> 00:04:12,900
We can then call, update cell or whatever other action.

58
00:04:12,910 --> 00:04:16,110
Cowriter, we want to call and just provide the relevant arguments to it.

59
00:04:16,440 --> 00:04:20,820
So much easier than doing that dispatch action, krugersdorp, blah, blah, all that long stuff.

60
00:04:22,260 --> 00:04:26,620
OK, so that's pretty much it, we've got this little helper hook put together, so we'll come back

61
00:04:26,620 --> 00:04:31,860
to the next video and make sure that as a user starts to change some cell contents again, as I start

62
00:04:31,860 --> 00:04:35,700
to say, maybe type inside of one of those code editors.

63
00:04:35,700 --> 00:04:38,910
And again, I've got this darn error message where I've got an empty file.

64
00:04:38,910 --> 00:04:41,040
I've got to restart my development server again.

65
00:04:41,580 --> 00:04:46,200
We are going to make sure that whenever user types inside of the text or code editor, we're just going

66
00:04:46,200 --> 00:04:48,540
to make sure that we update the state inside of our Reduc store.

67
00:04:49,600 --> 00:04:53,590
OK, so again, this is a message, if you have it as well, remember, the only way you can get it

68
00:04:53,590 --> 00:04:55,460
to go away is to restart your development server.

69
00:04:55,780 --> 00:04:57,820
So just very quickly, last thing for this video.

70
00:04:57,820 --> 00:05:02,730
I promise I'm going to go and restart my development server and then that error message should go away

71
00:05:02,740 --> 00:05:03,430
in just a moment.

72
00:05:03,850 --> 00:05:08,190
Well, let's take a pause right here and continue with a little bit more around Redox in just a moment.