1
00:00:01,200 --> 00:00:06,320
The last section we realize that there is going to be a little bit of issue with our piece of state.

2
00:00:06,360 --> 00:00:11,820
There are some pieces stayed on there that we can only update after we make an asynchronous request.

3
00:00:11,970 --> 00:00:16,620
We eventually came to the realisation that we've been writing action creators that are synchronous in

4
00:00:16,620 --> 00:00:21,220
nature so we run them and they instantly return in action.

5
00:00:21,240 --> 00:00:26,400
This does not work out for our kids though because we want to authenticate a user which is going to

6
00:00:26,400 --> 00:00:29,880
take a request and then only after that request succeeds.

7
00:00:29,940 --> 00:00:36,210
Do we have the information we need to actually return in action or dispatch an action as it were in

8
00:00:36,210 --> 00:00:36,780
this section.

9
00:00:36,780 --> 00:00:41,820
We're going to address this by first writing out our action creator with the authentication request

10
00:00:42,180 --> 00:00:46,850
and then make some changes to it to ensure that it works in an asynchronous fashion.

11
00:00:46,860 --> 00:00:51,220
So first we need to make an action creator that will attempt to log the user.

12
00:00:51,220 --> 00:00:56,940
So just something that's going to say hey firebase log in this user with this email and password.

13
00:00:56,940 --> 00:01:01,230
Now be clear the code that we're about to add will not work the way that we wanted to.

14
00:01:01,290 --> 00:01:02,910
It is just a starting point.

15
00:01:02,910 --> 00:01:06,500
We're going to kind of play around with it a little bit until it gets working.

16
00:01:06,600 --> 00:01:11,370
So first first attempt is give me just that an attempt.

17
00:01:12,270 --> 00:01:18,720
So inside my action creator file I'm going to make a new action creator say expert Konstam MICKOLUS

18
00:01:18,860 --> 00:01:24,860
log in user with the very obvious purpose or job of authenticating user.

19
00:01:24,980 --> 00:01:27,790
I expect it to be called with an email and password

20
00:01:30,930 --> 00:01:35,130
and notice that I have the curly braces on here which means I expect this to be called with an object

21
00:01:35,130 --> 00:01:38,810
that has an e-mail and a password property on it.

22
00:01:38,820 --> 00:01:42,310
Next we're going to add some logic to handle our firebase log in.

23
00:01:42,450 --> 00:01:45,660
First we will import firebase up at the top of the file.

24
00:01:45,750 --> 00:01:54,330
So at the very very top I will import firebase from firebase and on down at the bottom inside our action

25
00:01:54,330 --> 00:01:55,380
career that we just created.

26
00:01:55,380 --> 00:01:58,560
We're going to create or to add in our authentication call.

27
00:01:58,830 --> 00:02:03,930
So again for right now we're just going to attempt to sign a any user and not worry about creating a

28
00:02:03,930 --> 00:02:05,180
new account or anything like that.

29
00:02:05,180 --> 00:02:11,800
Just sign in the user so say firebase dot dot sign in.

30
00:02:11,810 --> 00:02:16,760
You remember this long one right with email and password.

31
00:02:16,960 --> 00:02:19,280
They're going to pass and email and password

32
00:02:23,720 --> 00:02:29,450
again just to make sure everything here is crystal clear this call is going to make a request to firebase

33
00:02:29,450 --> 00:02:30,370
the servers.

34
00:02:30,440 --> 00:02:34,940
So the earliest time that we can get access to any response from it are like any.

35
00:02:34,940 --> 00:02:36,960
And it says like hey everything worked out ok.

36
00:02:37,140 --> 00:02:41,510
Is by adding in a then clause because this is a promise right here.

37
00:02:41,510 --> 00:02:47,200
So we'll say then when you get back the user just go ahead and cancel log the user

38
00:02:50,580 --> 00:02:53,770
so the then clause will be executed after the request is finished.

39
00:02:53,820 --> 00:02:57,040
And it will be called with a user if one exists.

40
00:02:57,180 --> 00:03:02,400
If we enter an account that does not exist for invalid credentials then we're not going to see anything

41
00:03:02,400 --> 00:03:07,470
out of this promise right here because it's going to hit a ketch case and we're not handling that catch

42
00:03:07,470 --> 00:03:09,040
on here right now.

43
00:03:09,970 --> 00:03:10,500
OK.

44
00:03:10,620 --> 00:03:17,070
So after all this big lead up after all this you know big deal how do we fix this issue with asynchronous

45
00:03:17,070 --> 00:03:18,020
action creators.

46
00:03:18,030 --> 00:03:24,090
How do we only dispatch action after we hit this then right here because this technically right here

47
00:03:24,360 --> 00:03:28,690
is exactly when we would want to return an action to do this.

48
00:03:28,690 --> 00:03:31,810
We are going to use a supporting library called redux Thuc.

49
00:03:31,830 --> 00:03:37,440
So that is like the big solution here we're going to use redux thung to handle asynchronous action creators

50
00:03:38,010 --> 00:03:38,540
redux.

51
00:03:38,550 --> 00:03:44,840
Thunk is used to handle any type of asynchronous action Krater that we might need throughout our codebase.

52
00:03:44,850 --> 00:03:50,790
So right now we're using it for firebase but it could be for any type of Ajax request or any long running

53
00:03:50,790 --> 00:03:53,820
process that you could possibly imagine.

54
00:03:53,820 --> 00:03:57,600
Redux thunked is a NPM module that we need to install and actually set up.

55
00:03:57,600 --> 00:04:01,190
So we're going to go through that process now at the command line.

56
00:04:01,710 --> 00:04:08,720
I'm going to install Reebok's thunked by running NPM install dash dash save redux dash.

57
00:04:08,780 --> 00:04:14,000
Thank you and while that goes we're going to look at a quick little diagram.

58
00:04:14,000 --> 00:04:17,110
It's going to help us understand what the Sing's doing for us.

59
00:04:17,210 --> 00:04:20,010
What is redux really doing.

60
00:04:20,030 --> 00:04:23,840
So first I want to go back and review a little bit.

61
00:04:23,840 --> 00:04:28,400
Our default action create a rules so by default I mean like how they work right now.

62
00:04:28,400 --> 00:04:35,600
Right like without redux tongkat all action creators are functions they must return in action and an

63
00:04:35,630 --> 00:04:40,120
action is an object to the type property and optionally a payload as well.

64
00:04:40,130 --> 00:04:44,210
So this is how actions behave right now are action creators behave right now.

65
00:04:44,360 --> 00:04:50,740
So the whole point of re-ups thung is to allow us to bend these rules like that is really what it does

66
00:04:50,750 --> 00:04:53,730
it allows us to bend the rules of action creators.

67
00:04:53,990 --> 00:04:56,260
Here's how it bends the rules.

68
00:04:56,960 --> 00:05:03,680
Once we install redux thunk we can either create an action creator which is a function and must return

69
00:05:03,710 --> 00:05:10,220
action action must be an object or or like so here's the big Or here's the bending the rules part really

70
00:05:10,220 --> 00:05:11,060
breaking them I guess.

71
00:05:11,060 --> 00:05:18,840
But you know what I mean with redux thunk and stalled action creators are functions so no change there.

72
00:05:19,340 --> 00:05:23,320
Action creators must return a function so that is the new part right here.

73
00:05:23,420 --> 00:05:30,860
Instead of returning an action which is an object we can return a function from our action creator.

74
00:05:31,580 --> 00:05:37,140
That function will then be called automatically for us with dispatch.

75
00:05:37,460 --> 00:05:41,520
And that last part there that that dispatch this is the real magic part right here.

76
00:05:41,690 --> 00:05:43,270
Dispatches the magic part.

77
00:05:43,370 --> 00:05:50,870
If you think back to when we first went over redux inside the Jazz playgrounds tool we use storm dispatch

78
00:05:50,900 --> 00:05:56,110
to dispatch or process an action or send it off to all of our different reducers.

79
00:05:56,300 --> 00:06:02,660
So the whole magic behind redux thunk is that it allows us to bend the rules of action creators by allowing

80
00:06:02,660 --> 00:06:09,140
us to return a function that gives us direct access to dispatch the dispatch method and that dispatch

81
00:06:09,140 --> 00:06:17,220
method will allow us to return or excuse me to manually dispatch an action to all of our different reducers.

82
00:06:17,220 --> 00:06:20,370
OK still again a lot of lecturing here.

83
00:06:20,540 --> 00:06:23,140
Let's just verify that the install went successfully.

84
00:06:23,140 --> 00:06:23,550
Yup.

85
00:06:23,570 --> 00:06:24,770
Here's Reebok's thunk.

86
00:06:24,770 --> 00:06:28,570
Let's take a quick break now and then come back and figure out how to use Reebok's thunk.

87
00:06:28,580 --> 00:06:29,300
In practice