1
00:00:00,810 --> 00:00:02,640
Instructor: We are now able to make authenticated

2
00:00:02,640 --> 00:00:06,660
API requests from our fetchMessage action creator.

3
00:00:06,660 --> 00:00:08,610
I would really like to make sure that we can show

4
00:00:08,610 --> 00:00:10,950
the message that we get back from the server

5
00:00:10,950 --> 00:00:12,660
inside of our feature component

6
00:00:12,660 --> 00:00:14,910
just to kinda pull everything together.

7
00:00:14,910 --> 00:00:16,860
So let's go through the process of wiring it up

8
00:00:16,860 --> 00:00:20,490
and catching this response inside of our reducer.

9
00:00:20,490 --> 00:00:22,530
To catch some new data inside of our reducer,

10
00:00:22,530 --> 00:00:26,010
I'm gonna add a new action type to our types file,

11
00:00:26,010 --> 00:00:28,293
and we're gonna call this one FETCH_MESSAGE.

12
00:00:32,520 --> 00:00:34,920
So here's our new type.

13
00:00:34,920 --> 00:00:37,380
Inside of our action creators file,

14
00:00:37,380 --> 00:00:39,060
we will import that new type.

15
00:00:39,060 --> 00:00:41,013
So I'm gonna import FETCH_MESSAGE.

16
00:00:45,600 --> 00:00:48,240
Then when we get the response back from our API,

17
00:00:48,240 --> 00:00:50,400
so that's this response object right here,

18
00:00:50,400 --> 00:00:52,830
we're gonna make use of Redux Thunk again.

19
00:00:52,830 --> 00:00:57,150
So we will immediately dispatch our own action with a type

20
00:00:57,150 --> 00:01:02,150
of FETCH_MESSAGE and a payload of action.payload.data.

21
00:01:05,010 --> 00:01:07,320
And let's just throw the entire message in there.

22
00:01:07,320 --> 00:01:10,560
So the payload is gonna be the actual message itself,

23
00:01:10,560 --> 00:01:12,033
the actual text string.

24
00:01:14,477 --> 00:01:16,710
Now we need to pick this up inside the reducer.

25
00:01:16,710 --> 00:01:19,170
So in the reducer, we need to add our type

26
00:01:19,170 --> 00:01:21,503
at the top as well, FETCH_MESSAGE.

27
00:01:23,549 --> 00:01:25,203
And then we'll add a case for it.

28
00:01:27,660 --> 00:01:31,230
Finally, we'll say take all of our state

29
00:01:31,230 --> 00:01:35,583
and add a message of action.payload in there as well.

30
00:01:36,840 --> 00:01:38,400
So now on our application state,

31
00:01:38,400 --> 00:01:43,230
we should have this message property under the auth_reducer.

32
00:01:43,230 --> 00:01:45,240
That means inside of our feature component,

33
00:01:45,240 --> 00:01:49,923
we can now define our function mapStateToProps.

34
00:01:51,510 --> 00:01:53,790
It's gonna take in some state,

35
00:01:53,790 --> 00:01:58,203
and we'll just return a message: state.auth.message like so.

36
00:02:00,030 --> 00:02:01,860
Make sure to wire it up to our connect call

37
00:02:01,860 --> 00:02:04,530
'cause, again, I've been forgetting that lately,

38
00:02:04,530 --> 00:02:05,763
mapStateToProps.

39
00:02:06,720 --> 00:02:09,509
And the very last step is inside the render method.

40
00:02:09,509 --> 00:02:12,810
We'll just say render this.props.message.

41
00:02:12,810 --> 00:02:14,250
There we go.

42
00:02:14,250 --> 00:02:15,603
So let's save this.

43
00:02:16,680 --> 00:02:18,213
Let's refresh the page.

44
00:02:19,110 --> 00:02:20,730
Looks like dispatch is not defined.

45
00:02:20,730 --> 00:02:21,900
I probably have a typo somewhere.

46
00:02:21,900 --> 00:02:23,700
Let's go check real quick

47
00:02:23,700 --> 00:02:26,280
inside of our action creators file.

48
00:02:26,280 --> 00:02:27,903
Here's my dispatch.

49
00:02:28,770 --> 00:02:33,770
Do I have, oh dispath, dispatch, missed a C, dispatch.

50
00:02:33,930 --> 00:02:35,940
Hopefully, I didn't misspell it anywhere else as well.

51
00:02:35,940 --> 00:02:37,383
Nope, looks I didn't.

52
00:02:38,490 --> 00:02:41,403
All right, so dispatch, dispatch, very good.

53
00:02:44,280 --> 00:02:47,460
Looks like still have, oh totally my mistake here.

54
00:02:47,460 --> 00:02:49,980
I said action.payload.message.

55
00:02:49,980 --> 00:02:52,380
It should be just response.data.

56
00:02:52,380 --> 00:02:56,280
I'm totally used to doing this stuff inside the reducer,

57
00:02:56,280 --> 00:02:58,653
response.data.message. There we go.

58
00:03:00,390 --> 00:03:03,300
There we go, all right, so we made our authenticated request

59
00:03:03,300 --> 00:03:07,740
to super secret code is 123, is ABC123.

60
00:03:07,740 --> 00:03:09,480
And so, again, keep in mind

61
00:03:09,480 --> 00:03:11,730
that this is just a very simple example here.

62
00:03:11,730 --> 00:03:13,620
This could have very trivially turned into something

63
00:03:13,620 --> 00:03:17,220
like, hey, fetch me my list of posts, or my list of tweets,

64
00:03:17,220 --> 00:03:20,640
or my list of emails, or whatever other resource

65
00:03:20,640 --> 00:03:23,400
I'm trying to resource or retrieve from the backend.

66
00:03:23,400 --> 00:03:27,420
And then the key there is that we're always gonna include

67
00:03:27,420 --> 00:03:30,630
the header, our JWT token inside the header,

68
00:03:30,630 --> 00:03:33,120
to make our authenticated request.

69
00:03:33,120 --> 00:03:35,970
Then with that JWT token, our server's going to know,

70
00:03:35,970 --> 00:03:38,250
oh, alright, you know this is coming from the user

71
00:03:38,250 --> 00:03:41,580
with email test123@example.com.

72
00:03:41,580 --> 00:03:45,000
I need to pull up that very specific user's emails,

73
00:03:45,000 --> 00:03:47,130
or tweets, or posts, or whatever it might be,

74
00:03:47,130 --> 00:03:48,990
whatever different resource.

75
00:03:48,990 --> 00:03:51,840
So this little chunk of code right here

76
00:03:51,840 --> 00:03:54,960
is very easily repeatable all over the place.

77
00:03:54,960 --> 00:03:56,640
By the way, this is also one great time

78
00:03:56,640 --> 00:03:59,670
for me to mention exactly why, you know,

79
00:03:59,670 --> 00:04:01,470
after all this time, exactly why we learned

80
00:04:01,470 --> 00:04:04,410
to use Redux Promise instead of Redux Thunk.

81
00:04:04,410 --> 00:04:06,360
We learned to use Redux Promise first

82
00:04:06,360 --> 00:04:10,620
because with Redux Promise, requests are so easily readable,

83
00:04:10,620 --> 00:04:12,570
just a hundred percent legible.

84
00:04:12,570 --> 00:04:15,240
Let's look at what this might look like

85
00:04:15,240 --> 00:04:17,100
with Redux Promise real quick.

86
00:04:17,100 --> 00:04:18,350
It would be fetchmessage,

87
00:04:20,040 --> 00:04:22,390
and then we would have some request right here,

88
00:04:24,900 --> 00:04:28,143
and then we would just return an object of type:

89
00:04:29,130 --> 00:04:33,690
FETCH_MESSAGE and a payload of request, and that's it.

90
00:04:33,690 --> 00:04:35,820
This would be our entire action creator

91
00:04:35,820 --> 00:04:38,460
if we were using Redux Promise here instead.

92
00:04:38,460 --> 00:04:41,280
So even though Redux Thunk gives us a lot of power,

93
00:04:41,280 --> 00:04:45,390
man, I feel very strongly that it is just a lot easier

94
00:04:45,390 --> 00:04:50,070
to read code with Redux Promise than Redux Thunk.

95
00:04:50,070 --> 00:04:52,860
With Redux Thunk, it is just really hard to glance

96
00:04:52,860 --> 00:04:55,020
at this structure right here and have an immediate idea

97
00:04:55,020 --> 00:04:56,670
of exactly what's going on.

98
00:04:56,670 --> 00:04:59,610
Much easier, much more clear with Redux Promise instead.

99
00:04:59,610 --> 00:05:01,590
So, again, that's why I really like

100
00:05:01,590 --> 00:05:03,900
to use Redux Promise, but to each his own.

101
00:05:03,900 --> 00:05:06,630
If you really like Redux Thunk instead,

102
00:05:06,630 --> 00:05:08,283
certainly go with that approach.

103
00:05:09,810 --> 00:05:10,980
All right, so this looks pretty great.

104
00:05:10,980 --> 00:05:13,413
Let's do some wrap-up inside the next section.