1
00:00:00,390 --> 00:00:05,460
In the last section we started putting together our fetch user action creator which is intended to make

2
00:00:05,460 --> 00:00:11,490
a request to our back and API and then somehow communicate to our authentic author douceur whether or

3
00:00:11,490 --> 00:00:13,400
not the user is currently signed in.

4
00:00:13,740 --> 00:00:17,910
So in this section we're going to again we're going be covering some challenging topics here.

5
00:00:17,910 --> 00:00:19,610
We're going to talk about redux stunk.

6
00:00:19,680 --> 00:00:26,100
We are also going to be talking about how to refactor this auction creator to use the async 08 syntax.

7
00:00:26,250 --> 00:00:30,330
Now very likely that this will take two separate sections but that's totally fine.

8
00:00:30,360 --> 00:00:34,590
We'll take our time and make sure we really understand this because again we're going to be repeating

9
00:00:34,590 --> 00:00:37,810
this process several times throughout the course.

10
00:00:37,980 --> 00:00:44,730
Now at this point I again I'm going to assume that you are passingly familiar with action creators.

11
00:00:44,730 --> 00:00:51,540
Remember the purpose of an action creator is to return an action that action gets sent to all the different

12
00:00:51,540 --> 00:00:58,350
reducers inside of our application which then produce new values for state and updates that state inside

13
00:00:58,350 --> 00:01:04,320
of a redux store the redux store then sends the newly updated state back to all the different re-act

14
00:01:04,320 --> 00:01:05,610
components.

15
00:01:05,610 --> 00:01:11,610
Now the key inside this process is that with vanilla redux like redux as we've installed it with no

16
00:01:11,610 --> 00:01:19,740
further configuration expects that any action creator that we call will instantly and immediately return

17
00:01:19,830 --> 00:01:20,940
an action.

18
00:01:20,970 --> 00:01:26,850
And remember we define an action as a javascript object with a type property and optionally with a payload

19
00:01:26,880 --> 00:01:28,050
as well.

20
00:01:28,050 --> 00:01:34,160
So the key thing to remember here is that an action creator always expects us to return in action.

21
00:01:34,470 --> 00:01:39,730
So what's redux thunk and what does redux thunk have to do with all this stuff.

22
00:01:39,840 --> 00:01:46,410
The entire purpose of redux stunk is to allow us to write action creators that break this rule right

23
00:01:46,410 --> 00:01:52,740
here that break specifically the requirement that we have to immediately return an action from every

24
00:01:52,740 --> 00:01:54,280
action creator we create.

25
00:01:54,540 --> 00:01:59,010
So take a look at a diagram that's going to help us understand a little bit more about what redux thunk

26
00:01:59,010 --> 00:02:01,320
is really doing for us.

27
00:02:01,330 --> 00:02:07,470
OK so this is essentially the same diagram but obviously one with one very large change right here right

28
00:02:07,470 --> 00:02:14,400
in the middle so you can think of this as being essentially what redux thunk is giving us access to.

29
00:02:14,400 --> 00:02:16,620
I want you to think of this thing as like a big funnel.

30
00:02:16,650 --> 00:02:21,210
That is just sitting out there waiting for actions to be passed into it.

31
00:02:21,240 --> 00:02:22,440
So let's go through this flow.

32
00:02:22,430 --> 00:02:25,260
We'll talk about exactly what the funnel is meant to represent.

33
00:02:25,560 --> 00:02:31,020
So again on the very far left hand side we have our re-act component the Riak component will call an

34
00:02:31,020 --> 00:02:33,200
action creator and then this time.

35
00:02:33,240 --> 00:02:37,660
Rather than saying returns in action I said produces an action.

36
00:02:37,680 --> 00:02:44,190
So that's what the action creator is really responsible for the action creator somehow produces an action.

37
00:02:44,190 --> 00:02:50,430
The real question is about how the action creator communicates that action back to the redux store.

38
00:02:50,820 --> 00:02:56,030
So this time around we're saying that the action creator is known is going to be returning it.

39
00:02:56,230 --> 00:03:03,570
Instead the action creator is going to be passing the action to what we call the dispatch function the

40
00:03:03,570 --> 00:03:07,100
dispatch function is a function that belongs to the redux store.

41
00:03:07,350 --> 00:03:12,930
If we call the dispatch function with an action the action will be automatically forwarded on to all

42
00:03:12,930 --> 00:03:17,720
the different reducers inside the application and those reducers will run like normal.

43
00:03:17,760 --> 00:03:22,480
They will produce a new value for state and they'll pass all that state back to the store.

44
00:03:22,680 --> 00:03:29,070
Now to be 100 percent clear this dispatch function is already where this action is being sent to.

45
00:03:29,070 --> 00:03:32,160
So in that last diagram we were looking at just two seconds ago.

46
00:03:32,160 --> 00:03:36,960
In this one right here when I had said the action Krater returns an action and that is sent to all the

47
00:03:36,960 --> 00:03:40,570
reducers there really is an invisible step right here.

48
00:03:40,740 --> 00:03:43,650
So when it says send two already that is.

49
00:03:43,650 --> 00:03:47,390
We are like looking at what the dispatch function is really doing.

50
00:03:47,400 --> 00:03:51,840
The dispatch functions purpose is to send these actions off to the producers.

51
00:03:51,840 --> 00:03:56,210
That step is already happening with three ducks whenever we use it.

52
00:03:56,220 --> 00:04:03,090
The only thing that redux thung is really doing for us is that it's giving us direct access to the dispatch

53
00:04:03,090 --> 00:04:03,900
function.

54
00:04:03,900 --> 00:04:08,940
So it says OK I understand that in your action Kreator you do not want to follow the rules.

55
00:04:08,940 --> 00:04:12,240
You do not want to just return in action like usual.

56
00:04:12,420 --> 00:04:19,500
Instead I'm going to give you direct access to this dispatch function and then at any time at any point

57
00:04:19,560 --> 00:04:21,050
after doing whatever you want.

58
00:04:21,150 --> 00:04:27,270
If you want to manually return or you want to me manually dispatch an action just pass the action to

59
00:04:27,270 --> 00:04:29,080
this dispatch function.

60
00:04:29,190 --> 00:04:34,530
So again redux thunk is really allowing us to bend the rules here and allowing us to manually dispatch

61
00:04:34,530 --> 00:04:40,410
an action at any point in time that we wish from an action creator rather than requiring us to just

62
00:04:40,470 --> 00:04:43,210
flat out return it from the action creator.

63
00:04:43,230 --> 00:04:49,410
Again I can't say that enough the dispatch function is already really being used behind the scenes right

64
00:04:49,410 --> 00:04:55,380
now so all we really get out of using that redux thing thunked thing is we just get the ability to get

65
00:04:55,380 --> 00:04:58,450
a handle directly onto the dispatch function.

66
00:04:58,870 --> 00:05:05,050
Ok so with that in mind we are now going to complete our action create or at least a kind of first run

67
00:05:05,050 --> 00:05:10,230
through with it and with this first run through we're going to kind of take a very rough approach.

68
00:05:10,240 --> 00:05:15,970
We're going to get everything working but we're going to say that this is like the one or version one.

69
00:05:16,000 --> 00:05:20,410
Once we get to version 1 and we understand how it works we're then going to come back and implement

70
00:05:20,410 --> 00:05:26,380
version 2 and in version 2 we're going to have the real like completed syntax where we use a lot of

71
00:05:26,680 --> 00:05:27,510
fancy.

72
00:05:27,580 --> 00:05:30,370
Yes 20:17 stuff and all that kind of good stuff.

73
00:05:30,370 --> 00:05:30,660
OK.

74
00:05:30,670 --> 00:05:32,160
So first time.

75
00:05:32,320 --> 00:05:36,610
You know let's get through it understand what's going on and then we'll come back and refactor everything.

76
00:05:37,000 --> 00:05:39,180
So let's flip on over to our action creator.

77
00:05:39,180 --> 00:05:44,230
So remember usually how we would usually put this stuff together as we would say something like Konst

78
00:05:44,230 --> 00:05:51,550
request equals the requests that we just made and then we would return an action with a type of something

79
00:05:51,550 --> 00:05:53,710
like Fettes user.

80
00:05:53,830 --> 00:05:57,370
And then on the payload property property we would have a request like so.

81
00:05:57,520 --> 00:06:00,980
So I'm saying that we're no longer going to exactly follow this right here.

82
00:06:01,120 --> 00:06:05,120
Instead we are going to get direct access to the dispatch function.

83
00:06:05,260 --> 00:06:07,160
So I need to clean this up.

84
00:06:07,390 --> 00:06:09,830
I'm not going to immediately return that action.

85
00:06:10,060 --> 00:06:14,560
And I'm also not going to assign the request object to anything we're going to let the request hang

86
00:06:14,560 --> 00:06:15,850
for just a second.

87
00:06:15,880 --> 00:06:20,970
So the first thing we're going to do is we're going to re factor this action creator to really use redux

88
00:06:20,970 --> 00:06:21,650
thunk.

89
00:06:21,670 --> 00:06:25,850
Now when we do this refactor it will look a little bit weird but just bear with me.

90
00:06:26,620 --> 00:06:30,180
So I'm going to add in the body of this function right here.

91
00:06:30,220 --> 00:06:39,130
I'm going to return a function and when this function is executed it's going to make the actual request

92
00:06:39,970 --> 00:06:40,940
like so.

93
00:06:41,650 --> 00:06:48,130
So now rather than returning an action from this action creator when ever the action creator gets called

94
00:06:48,460 --> 00:06:51,580
it will instantly return a function.

95
00:06:51,580 --> 00:06:52,970
Now here's the key.

96
00:06:53,050 --> 00:06:59,580
When we wired up the redux thung middleware just like two seconds ago inside of our source index not

97
00:06:59,630 --> 00:07:04,260
G-S file we wired it up as a middleware.

98
00:07:04,330 --> 00:07:10,210
The purpose of this middleware the purpose of relex thone is to inspect what ever value we return from

99
00:07:10,210 --> 00:07:17,200
this action creator if redux thunked sees that we return a function instead of a normal action redux

100
00:07:17,200 --> 00:07:23,620
thunked will automatically call this function and pass in that dispatch function as an argument.

101
00:07:23,800 --> 00:07:24,930
So dispatch right here.

102
00:07:25,000 --> 00:07:25,990
This is a function.

103
00:07:25,990 --> 00:07:29,310
This is the same function we were just looking at inside this diagram.

104
00:07:29,380 --> 00:07:34,630
So it's the thing that we can think of as like a big funnel and anything we toss into it any action

105
00:07:34,630 --> 00:07:40,510
we toss into it will be automatically forwarded off to all the different reducers in our application.

106
00:07:40,510 --> 00:07:47,170
And so now that we have access to this dispatch function we don't have to immediately return an action

107
00:07:47,170 --> 00:07:49,080
or anything like that we don't have to do anything in here.

108
00:07:49,090 --> 00:07:55,350
We can say at any given point in time oh you know what I now somewhat feel like dispatching action so

109
00:07:55,360 --> 00:07:56,670
I guess now I will.

110
00:07:56,690 --> 00:07:59,620
And so where is that really relevant for us in this code snippet.

111
00:07:59,860 --> 00:08:05,730
Well we want to dispatch an action after this request has been successfully completed.

112
00:08:05,920 --> 00:08:08,010
That's the whole point of all this.

113
00:08:08,230 --> 00:08:13,420
We do not want to dispatch an action until this API request has been completed.

114
00:08:13,510 --> 00:08:20,200
So we want to treat this thing like an asynchronous little piece of code because that's what it is we're

115
00:08:20,200 --> 00:08:26,920
going to chain on a then statement because X don't get returns a promise and then once the promise is

116
00:08:26,920 --> 00:08:33,880
resolved only then will we actually dispatch an action and have that be sent off to all of our different

117
00:08:33,880 --> 00:08:35,040
reducers.

118
00:08:35,110 --> 00:08:37,000
So let's give this a shot.

119
00:08:37,060 --> 00:08:43,660
I'm going to remove the semi-clean onions and chain on the then statement that then we'll be called

120
00:08:44,020 --> 00:08:46,430
with our response from the API.

121
00:08:46,780 --> 00:08:52,090
And so whenever we get that response back then I am ready to actually dispatch an action.

122
00:08:52,180 --> 00:08:57,010
So I will say dispatch I don't get a pass in the action that I want to dispatch.

123
00:08:57,010 --> 00:09:04,020
So I have a type of fetch user and a payload of the response so we just got back.

124
00:09:04,030 --> 00:09:06,590
So payload of reps like so.

125
00:09:07,180 --> 00:09:07,540
OK.

126
00:09:07,570 --> 00:09:14,950
So this right here is essentially V-1 of our code whenever the action creators called it will return

127
00:09:14,950 --> 00:09:21,610
a function redux thunk will see that we return to function and it will automatically call it with the

128
00:09:21,610 --> 00:09:22,790
dispatch.

129
00:09:22,870 --> 00:09:24,470
We then make a request.

130
00:09:24,670 --> 00:09:27,260
We wait until we get the response back from our API.

131
00:09:27,400 --> 00:09:32,540
And then once we have the response only at that point in time will we actually dispatch our action.

132
00:09:33,220 --> 00:09:33,480
OK.

133
00:09:33,490 --> 00:09:35,160
So that's pretty much it.

134
00:09:35,200 --> 00:09:40,930
That is our first action creator using both reducto thunk and using Axelson side of it.

135
00:09:40,930 --> 00:09:43,660
Again we're going to repeat this process many times.

136
00:09:43,690 --> 00:09:46,260
So at this point we're going to take a quick break.

137
00:09:46,330 --> 00:09:52,060
We're going to wire this action creator up to our application so that it's actually being called We

138
00:09:52,060 --> 00:09:55,700
will then be able to test it out and verify that it's working the way we expect.

139
00:09:55,720 --> 00:10:00,310
And then after we are able to verify that it's working as we expect we're going to come back to it and

140
00:10:00,310 --> 00:10:05,310
do that refactor to make it look really nice and pretty much better than it looks right now.

141
00:10:05,440 --> 00:10:06,060
OK.

142
00:10:06,400 --> 00:10:07,510
So let's take a quick break.

143
00:10:07,510 --> 00:10:11,360
We're going to come back and wire up the action crater to our actual application.