1
00:00:00,440 --> 00:00:02,430
-: In the last section we spoke about the last feature

2
00:00:02,430 --> 00:00:04,230
that we're gonna add into our application.

3
00:00:04,230 --> 00:00:05,820
We then flipped on over to our terminal

4
00:00:05,820 --> 00:00:07,650
and installed a couple packages.

5
00:00:07,650 --> 00:00:09,720
You'll notice that I restarted my development server

6
00:00:09,720 --> 00:00:13,260
with "NPM Run Start", so make sure you do the same as well.

7
00:00:13,260 --> 00:00:16,050
I'll now flip back over to my code editor

8
00:00:16,050 --> 00:00:20,430
and we'll first get started inside of our "Route.js" file.

9
00:00:20,430 --> 00:00:21,900
So at the end of last section

10
00:00:21,900 --> 00:00:25,170
we installed a "Middleware" called "reduxPromise"

11
00:00:26,160 --> 00:00:27,090
that "Middleware" is used

12
00:00:27,090 --> 00:00:28,890
to handle asynchronous action creators,

13
00:00:28,890 --> 00:00:31,710
or action creators that tried to make network requests.

14
00:00:31,710 --> 00:00:33,090
So we're gonna hook that middleware

15
00:00:33,090 --> 00:00:34,443
up to our store creation.

16
00:00:35,490 --> 00:00:39,075
At the very top, I will import "reduxPromise"

17
00:00:39,075 --> 00:00:42,750
from "redux-promise".

18
00:00:42,750 --> 00:00:46,230
And then I'm also going to import from the "Redux" library

19
00:00:46,230 --> 00:00:49,113
the "applyMiddleware" helper as well.

20
00:00:51,960 --> 00:00:54,630
So we're now gonna modify our "createStore"

21
00:00:54,630 --> 00:00:55,680
method right here,

22
00:00:55,680 --> 00:00:58,470
rather than adding in a third argument

23
00:00:58,470 --> 00:00:59,790
of the "applyMiddleware",

24
00:00:59,790 --> 00:01:01,320
which is where we hook up middleware,

25
00:01:01,320 --> 00:01:04,110
I'm going to pull the entire "createStore" call

26
00:01:04,110 --> 00:01:06,150
right here, out,

27
00:01:06,150 --> 00:01:09,120
and we're going to assign it to a temporary variable

28
00:01:09,120 --> 00:01:13,140
just to kind of clean up this function a little bit.

29
00:01:13,140 --> 00:01:16,260
So I will assign "createStore" to a store variable

30
00:01:16,260 --> 00:01:18,030
and then I'll pass that in as a store prop

31
00:01:18,030 --> 00:01:19,533
to my provider, like so.

32
00:01:21,120 --> 00:01:23,733
Now as the third argument, to the store,

33
00:01:24,900 --> 00:01:27,483
I'll pass in "applyMiddleware"

34
00:01:28,950 --> 00:01:32,970
and to "applyMiddleware", I'm gonna pass in "reduxPromise".

35
00:01:32,970 --> 00:01:36,552
So "reduxPromise", like so, and I'll save that

36
00:01:36,552 --> 00:01:39,273
and it's gonna do a little new line for me like so.

37
00:01:40,320 --> 00:01:42,120
So we've got "reducers", "initialState"

38
00:01:42,120 --> 00:01:44,010
and then all the "Middleware" that we're going to

39
00:01:44,010 --> 00:01:45,690
pass into "createStore".

40
00:01:45,690 --> 00:01:47,640
Now, quick reminder, we're gonna talk about "Middleware"

41
00:01:47,640 --> 00:01:49,680
in great detail later on inside the course,

42
00:01:49,680 --> 00:01:52,290
so if you're not super familiar with "applyMiddleware"

43
00:01:52,290 --> 00:01:54,000
don't sweat it, we'll go through great detail

44
00:01:54,000 --> 00:01:56,040
on what it's really doing for us.

45
00:01:56,040 --> 00:01:57,090
Okay, so that's good.

46
00:01:57,090 --> 00:02:00,030
We've now essentially taught "Redux" how to work

47
00:02:00,030 --> 00:02:02,280
with asynchronous action creators.

48
00:02:02,280 --> 00:02:04,758
So let's now add an action creator that will make a network

49
00:02:04,758 --> 00:02:07,650
request over to that json API

50
00:02:07,650 --> 00:02:09,183
and get this list of comments.

51
00:02:10,440 --> 00:02:13,320
We'll first open up our "types.js" file.

52
00:02:13,320 --> 00:02:17,730
Inside of here we'll add a new type for indicating a list

53
00:02:17,730 --> 00:02:19,830
of comments have been fetched.

54
00:02:19,830 --> 00:02:22,440
So I will say "export const" and we'll just call this thing

55
00:02:22,440 --> 00:02:23,667
like "FETCH_COMMENTS".

56
00:02:25,650 --> 00:02:26,950
I think that's reasonable.

57
00:02:28,650 --> 00:02:31,983
So now we'll flip on over to our actions "index.js" file.

58
00:02:34,050 --> 00:02:36,447
At the top I will import "FETCH_COMMENTS",

59
00:02:39,270 --> 00:02:41,380
and then I'll make a new action creator

60
00:02:42,780 --> 00:02:44,097
called "fetchComments".

61
00:02:45,757 --> 00:02:47,970
"fetchComments" is not gonna take any arguments

62
00:02:47,970 --> 00:02:50,310
because its sole purpose is to reach out to that API

63
00:02:50,310 --> 00:02:52,560
that we're just taking a look at and get the list

64
00:02:52,560 --> 00:02:53,960
of comments from over there.

65
00:02:55,380 --> 00:02:58,890
So inside this thing, we're going to make a request,

66
00:02:58,890 --> 00:03:00,630
off to that API.

67
00:03:00,630 --> 00:03:03,183
Before I forget, let's import "axios" at the top.

68
00:03:05,760 --> 00:03:07,920
So now inside of "fetchComments"

69
00:03:07,920 --> 00:03:11,670
we'll say const response is "axios.get"

70
00:03:11,670 --> 00:03:13,230
and then we'll pass in the URL

71
00:03:13,230 --> 00:03:15,750
that we want to make a request to right here.

72
00:03:15,750 --> 00:03:19,230
So to get that URL, I'll flip back over to my browser

73
00:03:19,230 --> 00:03:22,200
and I've got that URL right here on the page.

74
00:03:22,200 --> 00:03:25,320
So I'm gonna just take this directly outta the address bar

75
00:03:25,320 --> 00:03:28,590
and I'll put it right into "axios.get".

76
00:03:28,590 --> 00:03:33,590
So in total "https://jsonplaceholder.typicode.com/comments"

77
00:03:34,950 --> 00:03:36,390
Now one thing I recommend you do,

78
00:03:36,390 --> 00:03:38,010
just to save yourself a headache,

79
00:03:38,010 --> 00:03:40,560
remove the 'S' outta the HTTPS

80
00:03:40,560 --> 00:03:43,440
so that we don't run into any security issues later on

81
00:03:43,440 --> 00:03:45,300
where a browser might complain about loading up

82
00:03:45,300 --> 00:03:47,973
a secure resource from a non-secure page.

83
00:03:49,350 --> 00:03:52,560
Okay, that's not strictly required, but it,

84
00:03:52,560 --> 00:03:55,410
on some browsers might just help you out.

85
00:03:55,410 --> 00:03:59,650
So now that we make that request, we'll return in action

86
00:04:00,540 --> 00:04:02,020
with a type of

87
00:04:03,127 --> 00:04:04,323
"Fetch_Comments"

88
00:04:07,890 --> 00:04:09,030
and for the payload

89
00:04:09,030 --> 00:04:12,450
we'll just pass that entire response through.

90
00:04:12,450 --> 00:04:14,950
So take that entire response and toss it on there.

91
00:04:15,960 --> 00:04:17,190
Okay, so that looks pretty good.

92
00:04:17,190 --> 00:04:19,920
That's our "Fetch_Comments" action creator.

93
00:04:19,920 --> 00:04:21,209
Let's take a quick pause right here.

94
00:04:21,209 --> 00:04:22,650
We'll come back the next section,

95
00:04:22,650 --> 00:04:24,360
we're gonna make sure that "fetchComments"

96
00:04:24,360 --> 00:04:26,670
gets called from our comment list or comment box

97
00:04:26,670 --> 00:04:28,560
wherever we want to put that button

98
00:04:28,560 --> 00:04:29,880
and they'll make sure that we watch

99
00:04:29,880 --> 00:04:31,620
for the "Fetch_Comments" type

100
00:04:31,620 --> 00:04:33,750
inside of our comments reducer.

101
00:04:33,750 --> 00:04:34,920
So quick break and we'll take care

102
00:04:34,920 --> 00:04:36,820
of all that stuff in the next section.