Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:01,450
Hi there, welcome back.
2
00:00:01,620 --> 00:00:06,470
And your lecture, guys, in their previous one, they have done some changes in our have you extra
3
00:00:06,480 --> 00:00:08,130
in these like to continue?
4
00:00:08,290 --> 00:00:10,200
Well, even if further changes.
5
00:00:10,560 --> 00:00:12,990
So let's start open our code.
6
00:00:13,550 --> 00:00:17,850
And the first I will draw here, so I'll show you what I would like to implement.
7
00:00:18,600 --> 00:00:24,050
OK, so as I withdraw before we will have a view we have, our component will be our home.
8
00:00:24,060 --> 00:00:25,610
We can call this home.
9
00:00:26,960 --> 00:00:27,160
Right.
10
00:00:27,330 --> 00:00:32,340
And in our home, in exchange to exchanges data, we are getting them through their computer properties.
11
00:00:32,340 --> 00:00:33,870
Nothing, nothing bad in that.
12
00:00:34,080 --> 00:00:38,220
But in the real that their case scenario, they'll have a database, right?
13
00:00:38,220 --> 00:00:45,390
In this case, we'll be using the Firebase database, Almaguer View Explorer, then it'll be our view
14
00:00:46,120 --> 00:00:47,100
of the UX.
15
00:00:47,700 --> 00:00:51,810
So it will happen from our home page in our home page and we'll land at the home page.
16
00:00:52,020 --> 00:00:53,520
I would like to dispatch action.
17
00:00:54,690 --> 00:01:00,030
OK, so we'll be dispatching here at this page and I will be dispatching here to get exchanges.
18
00:01:00,390 --> 00:01:04,320
OK, so get guys exchanges or get any data.
19
00:01:04,470 --> 00:01:05,210
Get this page.
20
00:01:05,210 --> 00:01:07,740
You get the view of what they'll do for us.
21
00:01:07,770 --> 00:01:08,610
We'll ask.
22
00:01:08,610 --> 00:01:14,820
We'll make the same old request as we'll go outside of our computers outside of the realm of our application.
23
00:01:15,060 --> 00:01:17,590
They'll make a request to I won't make it here.
24
00:01:17,620 --> 00:01:18,750
I don't have much space there.
25
00:01:19,050 --> 00:01:22,020
They'll make a request to Firebase failure.
26
00:01:23,220 --> 00:01:29,280
Firebase to ask for a data will be storing the R data in the Firebase database, thoroughbreds will
27
00:01:29,280 --> 00:01:32,250
respond with the data will get them back here.
28
00:01:33,030 --> 00:01:33,540
All right.
29
00:01:33,550 --> 00:01:35,370
Will be our exchanges.
30
00:01:35,880 --> 00:01:38,660
Next gen exchanges.
31
00:01:39,480 --> 00:01:39,690
Hello.
32
00:01:40,040 --> 00:01:45,480
The release of the interview and interview exposed stored them to to the state of the vucic's, so they
33
00:01:45,480 --> 00:01:50,880
will be stored in a state of the Buick's and state will be bussed here, back here.
34
00:01:50,880 --> 00:01:52,110
So state will get here.
35
00:01:52,690 --> 00:01:56,580
They will simply handle the state through their computer properties, right?
36
00:01:57,850 --> 00:02:00,590
So that's basically the guys take a look at this architecture.
37
00:02:00,610 --> 00:02:02,500
It's very similar to what we have currently now.
38
00:02:02,950 --> 00:02:08,530
Just this additional step that a view will be making request for exchange just from a fighter base.
39
00:02:10,500 --> 00:02:17,310
OK, so first, let's create his action to get exchanges right.
40
00:02:18,740 --> 00:02:22,730
Let's go to our index dodgers in our states and our.
41
00:02:23,640 --> 00:02:25,110
I have again to some changes.
42
00:02:25,550 --> 00:02:30,420
I will once again, I will get these exchanges, I will just simply copy the entire area as I have it.
43
00:02:30,420 --> 00:02:34,480
Now, let me look, I will just copy the entire right as I have it.
44
00:02:35,280 --> 00:02:38,340
I'll copy it and I will remove it and I will create here.
45
00:02:38,340 --> 00:02:39,140
And you're very able up.
46
00:02:39,150 --> 00:02:40,470
Yet I will call it exchanges.
47
00:02:42,190 --> 00:02:47,370
All right, and help base it here so far, it'll be not doing any requests to Firebase.
48
00:02:47,380 --> 00:02:49,750
I just want to show you locally how we can assure you this.
49
00:02:49,760 --> 00:02:55,230
There'll be I'll be doing, I'll be working on some locales on local simulation so contested that would
50
00:02:55,230 --> 00:02:59,650
without even connecting to Firebase and later connected to the Firebase.
51
00:03:00,700 --> 00:03:02,230
So they have exchanges here.
52
00:03:02,260 --> 00:03:02,770
Perfect.
53
00:03:03,880 --> 00:03:08,740
And here in return, just return the empty area of exchanges like this initial idea of an empty data.
54
00:03:08,740 --> 00:03:11,350
That's what should happen normally empty exchanges.
55
00:03:12,490 --> 00:03:14,440
I would like to introduce their actions.
56
00:03:15,660 --> 00:03:21,180
Well, they're able to by their actions and in the actions of VLA, create new action, I will call
57
00:03:21,180 --> 00:03:22,680
it, to get exchanges or get.
58
00:03:24,080 --> 00:03:26,000
X changes.
59
00:03:26,570 --> 00:03:27,590
All right.
60
00:03:28,910 --> 00:03:35,030
OK, so what we want to do here and action is this patch to get the changes simply would like to set
61
00:03:35,450 --> 00:03:38,660
the state of these exchanges we are getting here.
62
00:03:39,760 --> 00:03:44,140
I will do it like these guys, it'll be maybe a little bit more complicated for the beginning.
63
00:03:44,440 --> 00:03:49,150
But that's how they need to do it, or I should say complicated, but it should.
64
00:03:49,150 --> 00:03:56,050
Maybe it can be confusing in order to simulate the time out, which can happen when I'm making a request
65
00:03:56,050 --> 00:03:56,740
to Firebase.
66
00:03:56,950 --> 00:04:01,900
Remember, I've unveiled the mechanics of fire based is going through the network so it can take up
67
00:04:01,910 --> 00:04:05,530
of milliseconds to get the response from Firebase.
68
00:04:06,650 --> 00:04:12,680
Too, similar to this time out, I'm glad your function called here function said timeout.
69
00:04:13,370 --> 00:04:19,760
These are normal JavaScript function you can call from your browser from from a JavaScript and to this
70
00:04:19,760 --> 00:04:22,780
function when you are calling it the URL, providing the callback function.
71
00:04:22,790 --> 00:04:29,330
So just an anonymous arrow function inside like this and this package function anonymous inside will
72
00:04:29,330 --> 00:04:33,410
be executed after a specific timetable specified as a second value here.
73
00:04:34,550 --> 00:04:40,730
So let's specify here, let's say 1000, which means one thousand milliseconds, which means one second.
74
00:04:42,200 --> 00:04:46,820
So after one second, this function will be executed and what we will simply do here.
75
00:04:48,110 --> 00:04:52,760
You will get her state of the exchanges and we will set it to the exchanges we have here.
76
00:04:53,720 --> 00:04:54,110
OK.
77
00:04:55,180 --> 00:04:57,400
So let's do it like this.
78
00:04:58,060 --> 00:04:58,510
How can we?
79
00:04:58,540 --> 00:05:04,120
First of all, how we can get a state here, how can we get our local state, a lot of store in ah,
80
00:05:05,030 --> 00:05:10,120
in this module, we can get it through the parameters of the actions functions.
81
00:05:10,840 --> 00:05:17,050
Every every election, there is severe context object.
82
00:05:17,560 --> 00:05:24,430
You can get your context object in a context object, specify lots of useful parameters that you can
83
00:05:24,610 --> 00:05:25,390
that you can use.
84
00:05:26,470 --> 00:05:27,910
So far, I will show you on this stage.
85
00:05:27,910 --> 00:05:34,120
One can access the state of the context, but later I will introduce more, more, more parameters.
86
00:05:34,660 --> 00:05:35,020
OK.
87
00:05:35,560 --> 00:05:39,940
So for now, with only two boxes here, even in context, I can distract tries whatever context they
88
00:05:39,940 --> 00:05:43,040
present and I can get specifically from the context state.
89
00:05:43,060 --> 00:05:45,280
That's what you can get from the context state.
90
00:05:46,090 --> 00:05:47,080
And this is a state.
91
00:05:47,090 --> 00:05:48,550
What do you have up here?
92
00:05:50,500 --> 00:05:55,060
OK, so after this one second, after the call to get exchanges, I'll get a state.
93
00:05:55,900 --> 00:06:01,270
Remember, on the state, they have exchanges a lot of the exchanges and I will send to the exchanges
94
00:06:01,630 --> 00:06:05,440
exchanges I have here in a variable of exchanges.
95
00:06:07,300 --> 00:06:07,770
All right.
96
00:06:08,640 --> 00:06:13,450
OK, I know it doesn't make much sense, but we might have action is why I need to do this, but I just
97
00:06:13,450 --> 00:06:16,000
want to simulate here what's going to happen in the normal case.
98
00:06:17,460 --> 00:06:18,640
OK, I will save it.
99
00:06:18,820 --> 00:06:20,530
And now they need to go to home.
100
00:06:20,560 --> 00:06:27,310
VIDEO and Dot View if you call this civil dispatch here to get exchange as this action.
101
00:06:27,760 --> 00:06:29,290
But what's a good spot for it?
102
00:06:30,660 --> 00:06:35,820
And then talk about this much, but we have a lifecycle functions and a good initialization lifecycle
103
00:06:35,820 --> 00:06:43,620
functions are mounted and the other one is created, and these lifecycle functions are called only once
104
00:06:43,620 --> 00:06:46,740
the manual component, your home page is initialized.
105
00:06:47,460 --> 00:06:51,590
So what's the difference between the mounted and the created by the debugger?
106
00:06:51,600 --> 00:06:54,150
So you can see that the debugger here and debug error here?
107
00:06:55,800 --> 00:07:01,540
The difference main difference is that the mount that is called before the created or actually other
108
00:07:01,590 --> 00:07:04,530
around my mistake created is called the B4 mounted.
109
00:07:05,370 --> 00:07:12,840
Created is called whenever your internal representation of the page is created as an instance in the
110
00:07:12,840 --> 00:07:18,780
memory, all or all of the data you get some data here all received all the props all received here
111
00:07:19,020 --> 00:07:26,940
and this stuff mounted is called whenever your page is mounted into the DOM into document object model,
112
00:07:26,940 --> 00:07:30,210
so it's either displayed on the on screen.
113
00:07:30,870 --> 00:07:31,500
I'll show you.
114
00:07:31,510 --> 00:07:33,230
So let's see.
115
00:07:33,690 --> 00:07:35,130
Let's leave here this to the Bhagyaraj.
116
00:07:35,400 --> 00:07:40,920
Go to your browser, open here console and refresh, and you will see the created.
117
00:07:40,920 --> 00:07:41,750
It's called first.
118
00:07:41,760 --> 00:07:47,460
We don't have any representation of our of our home here yet, so we'll click here this arrow to continue
119
00:07:47,460 --> 00:07:49,650
in execution or script execution.
120
00:07:49,650 --> 00:07:51,120
You can see up here or this arrow here.
121
00:07:52,630 --> 00:07:57,790
Click it and you will see in the mouth and it's called the elderly, the page exists, OK, so it's
122
00:07:57,790 --> 00:08:02,050
mounted into the dome document object model, basically into the HTML.
123
00:08:04,170 --> 00:08:10,920
OK, so that's a difference, and for this reason, we'll be using that created to fetching for a fetching
124
00:08:11,130 --> 00:08:11,670
data.
125
00:08:12,590 --> 00:08:17,550
Alright, because mother is going to late there and I would like to get my data as soon as it's possible,
126
00:08:17,550 --> 00:08:19,920
so I will use a create the lifecycle function.
127
00:08:21,120 --> 00:08:24,020
OK, and I created you already see you already saw before that.
128
00:08:24,030 --> 00:08:31,740
How we can this page action just clear this dollar sign store call that is page on this and this projection?
129
00:08:31,740 --> 00:08:37,110
Harvey are calling this action a very simple one and get exchanges connected just like this.
130
00:08:38,010 --> 00:08:39,060
And let's save it.
131
00:08:39,060 --> 00:08:41,270
And after that, money will go to browser.
132
00:08:41,280 --> 00:08:41,970
You'll refresh.
133
00:08:43,020 --> 00:08:45,120
After one second, you should receive your data.
134
00:08:46,450 --> 00:08:50,140
OK, so that said, time out, we are getting our data, so let's recapitulate, guys.
135
00:08:51,190 --> 00:08:51,910
How does it work?
136
00:08:53,590 --> 00:08:58,570
So the first thing that we are starting this chain of the action starts in the created lifecycle function,
137
00:08:58,570 --> 00:08:58,810
right?
138
00:08:58,810 --> 00:08:59,950
So we are calling here.
139
00:09:00,220 --> 00:09:02,920
Dispatch we are dispatching here to the exchanges.
140
00:09:04,260 --> 00:09:04,830
All right.
141
00:09:04,920 --> 00:09:08,460
They're expecting this or this is landing in our view store in a.
142
00:09:09,540 --> 00:09:14,980
Inactions he writes or Wilczek ActionScript speech and good exchanges, so to will execute this action
143
00:09:15,000 --> 00:09:16,080
here, good exchanges.
144
00:09:16,410 --> 00:09:24,160
And this is going to love your stories of the Explorer, but then executing to get exchanges is passing
145
00:09:24,180 --> 00:09:27,420
US state and this state is a representation of the state here.
146
00:09:28,690 --> 00:09:31,770
OK, so they are calling here, but we are dispatching it.
147
00:09:31,770 --> 00:09:34,040
We are calling this function and we are calling.
148
00:09:34,050 --> 00:09:39,330
Therefore, therefore we are calling the timeout, the calling, set timeout and set timeout.
149
00:09:39,350 --> 00:09:43,920
It's a timing out the execution of the function provided inside.
150
00:09:44,220 --> 00:09:48,690
So this callback function here will be executed after one second.
151
00:09:49,650 --> 00:09:56,910
After one second, Avila is sent to the state exchanges here to this state, here by exchanges from
152
00:09:56,910 --> 00:09:57,330
up here.
153
00:09:59,000 --> 00:09:59,310
OK.
154
00:10:00,290 --> 00:10:05,240
These exchanges, so this will happen after one second, I look at my state exchanges and you know that
155
00:10:05,240 --> 00:10:09,500
they are linking together our home vote, bit the state through the consulate properly.
156
00:10:09,500 --> 00:10:11,540
So whenever it is sort of state will change.
157
00:10:11,810 --> 00:10:15,860
Also, the computer will be executed and will display the new data on the screen.
158
00:10:15,860 --> 00:10:18,410
And that's how it exactly how that how does it work?
159
00:10:18,980 --> 00:10:19,940
This is about how it works.
160
00:10:21,750 --> 00:10:26,030
All right, guys, so that's going to be it for all these electronic questions, if something is not
161
00:10:26,050 --> 00:10:26,490
clear.
162
00:10:27,000 --> 00:10:29,590
Ask in a Q&A and I will see you in the next.
163
00:10:29,590 --> 00:10:29,820
Well.
164
00:10:30,060 --> 00:10:30,390
Yes.
15793
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.