1
00:00:00,770 --> 00:00:04,610
In the last video we got a much better idea of exactly what redux thunks is doing.

2
00:00:04,760 --> 00:00:10,490
So it's now installed redux slunk into our project to be precise we already installed it as a dependency.

3
00:00:10,510 --> 00:00:16,130
But before we can make use of it we have to wire it up to our redux store remember nothing inside of

4
00:00:16,130 --> 00:00:16,490
redux.

5
00:00:16,490 --> 00:00:17,330
It's magic.

6
00:00:17,330 --> 00:00:20,990
So if you ever expect anything to be done chances are you have to do it yourself.

7
00:00:21,020 --> 00:00:26,420
And that includes wiring up middleware so to wire up redux think as a middle where we're going to go

8
00:00:26,420 --> 00:00:30,100
to our root index such as file inside of here.

9
00:00:30,140 --> 00:00:39,160
I'm going to import phunk from redux dash thunk and then I'm also going to import a second function

10
00:00:39,220 --> 00:00:41,280
from the redux library as well.

11
00:00:41,290 --> 00:00:42,570
So next you create store.

12
00:00:42,580 --> 00:00:48,610
I'm also going to imports apply middleware the Apply middleware function is how we connect a middleware

13
00:00:48,670 --> 00:00:51,300
like Thankx to our read store itself.

14
00:00:51,310 --> 00:00:53,620
So here here's where we create our store.

15
00:00:53,740 --> 00:00:58,000
We're going to have to add a little bit of code to this thing so just make our code a little bit more

16
00:00:58,180 --> 00:00:59,340
clear and legible.

17
00:00:59,410 --> 00:01:05,470
I'm going to extract that create store with a cut and I'm going to declare it ahead of time as a variable

18
00:01:07,080 --> 00:01:12,120
and then I will make sure that I still pass that story in to the store prop on that provider element.

19
00:01:12,120 --> 00:01:19,430
So now to hook up redux thunk as a second argument inside of create store I'm going to call apply middleware

20
00:01:21,210 --> 00:01:23,210
when I call applied middleware over here.

21
00:01:23,250 --> 00:01:24,990
I'm going to pass in thuck

22
00:01:28,310 --> 00:01:29,070
and that's pretty much it.

23
00:01:29,090 --> 00:01:31,580
That's how we hook up a middleware to a redux store.

24
00:01:31,580 --> 00:01:34,330
Pretty darn straightforward.

25
00:01:34,360 --> 00:01:39,730
All right so now we can flip back over to our actions index touchiest file which has our action creator

26
00:01:40,570 --> 00:01:43,930
now inside of your we need to make just one or two small changes.

27
00:01:43,930 --> 00:01:48,560
First off inside of the inner function we are currently returning an object.

28
00:01:48,670 --> 00:01:52,660
This is supposed to be our action when we are making use of redux thunk.

29
00:01:52,750 --> 00:01:56,900
We are not going to return any actions from the inner function any more.

30
00:01:57,010 --> 00:02:03,880
We can still have member we can still have normal action creators so we could still have export consta.

31
00:02:03,880 --> 00:02:06,660
I don't know select post or something like that.

32
00:02:06,850 --> 00:02:14,350
And inside of here we can still return a normal object with a type property partly an option no problem

33
00:02:14,350 --> 00:02:15,170
whatsoever.

34
00:02:18,530 --> 00:02:22,100
With redux thunk we just get the ability to return a function as well.

35
00:02:22,100 --> 00:02:26,210
That's the only change so we don't actually need the action creator I just wanted to make sure is really

36
00:02:26,210 --> 00:02:32,970
clear that you can still make normal action creators that return action objects so inside of this inner

37
00:02:32,970 --> 00:02:38,610
function we do not need to return in action if we are returning a function if we ever want to dispatch

38
00:02:38,610 --> 00:02:39,110
an action.

39
00:02:39,120 --> 00:02:44,540
We will instead call the dispatch function manually with the action that we are trying to dispatch.

40
00:02:44,580 --> 00:02:51,420
So rather than returning an action side of your I would instead call dispatch and pass in my action

41
00:02:51,480 --> 00:02:53,150
object like so.

42
00:02:53,610 --> 00:02:59,720
So let's say fenceposts and then we can add on a payload property aswell that has all the data from

43
00:02:59,720 --> 00:03:01,050
our request.

44
00:03:01,100 --> 00:03:05,480
Now in order to make sure that we still get our data inside of here we're going to revert back to that

45
00:03:05,480 --> 00:03:08,870
same async or wait syntax that we had before.

46
00:03:08,900 --> 00:03:15,300
So I'm going to mark this function as async and then I'll put the Awake keyword in front of J some place

47
00:03:15,300 --> 00:03:19,920
holder and then I'm going to again change the name of this variable back over to response because that's

48
00:03:19,920 --> 00:03:20,960
what it really is.

49
00:03:21,000 --> 00:03:27,950
And then on my palette property output response like so now you might be curious Wait wait wait wait

50
00:03:27,950 --> 00:03:30,390
why are we using the syncopate syntax again here.

51
00:03:30,560 --> 00:03:32,700
Well with three ducks thunk we can use a sink.

52
00:03:32,720 --> 00:03:34,750
Oh wait no problem whatsoever.

53
00:03:35,030 --> 00:03:40,190
Remember the entire problem with async Oh wait is that with a synchronous action Creator it causes us

54
00:03:40,190 --> 00:03:44,930
to return a request object instead of a action.

55
00:03:45,080 --> 00:03:51,200
But once we have read stunk the async await syntax right here is only going to modify the return values

56
00:03:51,230 --> 00:03:55,370
of this inner function and we don't care about what we return from this function.

57
00:03:55,400 --> 00:03:59,450
Nothing from this function return or invocation ever gets used.

58
00:03:59,600 --> 00:04:04,580
You just looked at the source code of redux thunk and you saw that redux thunked did not somehow get

59
00:04:04,580 --> 00:04:09,470
a reference to whatever gets returned from right and make use of it for some nefarious purpose or anything

60
00:04:09,470 --> 00:04:14,770
like that so we can return or not return anything we want from the inner function.

61
00:04:14,810 --> 00:04:19,570
It is only what we return from our outer function the actual creator itself that we are concerned about

62
00:04:21,630 --> 00:04:22,080
OK.

63
00:04:22,210 --> 00:04:24,880
Now we're going to do a little bit of a refactor to the function.

64
00:04:24,880 --> 00:04:27,040
Right now we are using the function keyword here.

65
00:04:27,040 --> 00:04:31,200
I just wanted to make sure that it was really clear that we could return a function.

66
00:04:31,510 --> 00:04:34,800
But whenever you make use of redux thunk you will very commonly seen this.

67
00:04:34,810 --> 00:04:36,920
See this thing refactor just a little bit.

68
00:04:36,940 --> 00:04:43,730
So first off it's very common to return a arrow function instead of a keyword function like so.

69
00:04:44,110 --> 00:04:49,090
Secondly you'll notice that you're not using this state argument or function anywhere inside the function.

70
00:04:49,090 --> 00:04:53,410
So we don't have to always list out get state we are making use of dispatch.

71
00:04:53,410 --> 00:04:55,390
So we will leave that in.

72
00:04:55,390 --> 00:05:01,750
Remember that whenever we have a aero function with only one arguments the parentheses around it are

73
00:05:01,780 --> 00:05:02,460
optional.

74
00:05:02,530 --> 00:05:08,830
So I can remove those and then finally on the outer function you'll notice that we do not have any other

75
00:05:08,830 --> 00:05:09,760
variables inside of here.

76
00:05:09,760 --> 00:05:15,970
We just have one expression that we are immediately returning and so on the outer function we can optionally

77
00:05:16,210 --> 00:05:23,440
remove those semi-colons or mean Curly braces at the top and the bottom and remove the return key word

78
00:05:23,470 --> 00:05:24,320
right there.

79
00:05:24,630 --> 00:05:32,560
And so this entire statement can be shortened up to just this like so totally equivalent to what we

80
00:05:32,560 --> 00:05:33,700
just had a moment ago.

81
00:05:33,760 --> 00:05:38,840
We just took made use of a couple of yes 20:15 pieces of syntax that's all.

82
00:05:38,860 --> 00:05:40,170
So the syntax you see right here.

83
00:05:40,210 --> 00:05:44,000
You are going to very frequently see in a lot of redux projects.

84
00:05:44,020 --> 00:05:51,550
Remember all this is doing is we're defining a function that is going to return a function that says

85
00:05:51,580 --> 00:05:52,090
pretty much it.

86
00:05:52,090 --> 00:05:54,730
This is what we're going to end up with right here.

87
00:05:54,730 --> 00:05:59,290
So I'm going to save this and then I'm just going to flip back over to my browser really quick and make

88
00:05:59,290 --> 00:06:04,780
sure that we do not have any error messages back over here I don't see any error messages so it looks

89
00:06:04,780 --> 00:06:06,610
like we're good to go.

90
00:06:06,640 --> 00:06:11,650
All right so now that we understand how to create an asynchronous action creators we're not going to

91
00:06:11,650 --> 00:06:18,030
go back to our original flow around loading data up inside of a redux application.

92
00:06:18,280 --> 00:06:20,230
So this one right here.

93
00:06:20,400 --> 00:06:24,780
So some steps in this flow are going to kind of change now that we understand how to create asynchronous

94
00:06:24,780 --> 00:06:30,030
action creators but essentially at this point we have now taken care of those steps right there and

95
00:06:30,030 --> 00:06:36,090
now it's really just up to us to define a reducer that's going to see the action we are dispatching

96
00:06:36,120 --> 00:06:39,870
and get the data from that API off the payload property.

97
00:06:39,870 --> 00:06:44,000
So let's take a quick pause right here and we'll start taking care of our inducers in the next video.