Original subtitles

Hi there, welcome back.

And your lecture, guys, in their previous one, they have done some changes in our have you extra

in these like to continue?

Well, even if further changes.

So let's start open our code.

And the first I will draw here, so I'll show you what I would like to implement.

OK, so as I withdraw before we will have a view we have, our component will be our home.

We can call this home.

Right.

And in our home, in exchange to exchanges data, we are getting them through their computer properties.

Nothing, nothing bad in that.

But in the real that their case scenario, they'll have a database, right?

In this case, we'll be using the Firebase database, Almaguer View Explorer, then it'll be our view

of the UX.

So it will happen from our home page in our home page and we'll land at the home page.

I would like to dispatch action.

OK, so we'll be dispatching here at this page and I will be dispatching here to get exchanges.

OK, so get guys exchanges or get any data.

Get this page.

You get the view of what they'll do for us.

We'll ask.

We'll make the same old request as we'll go outside of our computers outside of the realm of our application.

They'll make a request to I won't make it here.

I don't have much space there.

They'll make a request to Firebase failure.

Firebase to ask for a data will be storing the R data in the Firebase database, thoroughbreds will

respond with the data will get them back here.

All right.

Will be our exchanges.

Next gen exchanges.

Hello.

The release of the interview and interview exposed stored them to to the state of the vucic's, so they

will be stored in a state of the Buick's and state will be bussed here, back here.

So state will get here.

They will simply handle the state through their computer properties, right?

So that's basically the guys take a look at this architecture.

It's very similar to what we have currently now.

Just this additional step that a view will be making request for exchange just from a fighter base.

OK, so first, let's create his action to get exchanges right.

Let's go to our index dodgers in our states and our.

I have again to some changes.

I will once again, I will get these exchanges, I will just simply copy the entire area as I have it.

Now, let me look, I will just copy the entire right as I have it.

I'll copy it and I will remove it and I will create here.

And you're very able up.

Yet I will call it exchanges.

All right, and help base it here so far, it'll be not doing any requests to Firebase.

I just want to show you locally how we can assure you this.

There'll be I'll be doing, I'll be working on some locales on local simulation so contested that would

without even connecting to Firebase and later connected to the Firebase.

So they have exchanges here.

Perfect.

And here in return, just return the empty area of exchanges like this initial idea of an empty data.

That's what should happen normally empty exchanges.

I would like to introduce their actions.

Well, they're able to by their actions and in the actions of VLA, create new action, I will call

it, to get exchanges or get.

X changes.

All right.

OK, so what we want to do here and action is this patch to get the changes simply would like to set

the state of these exchanges we are getting here.

I will do it like these guys, it'll be maybe a little bit more complicated for the beginning.

But that's how they need to do it, or I should say complicated, but it should.

Maybe it can be confusing in order to simulate the time out, which can happen when I'm making a request

to Firebase.

Remember, I've unveiled the mechanics of fire based is going through the network so it can take up

of milliseconds to get the response from Firebase.

Too, similar to this time out, I'm glad your function called here function said timeout.

These are normal JavaScript function you can call from your browser from from a JavaScript and to this

function when you are calling it the URL, providing the callback function.

So just an anonymous arrow function inside like this and this package function anonymous inside will

be executed after a specific timetable specified as a second value here.

So let's specify here, let's say 1000, which means one thousand milliseconds, which means one second.

So after one second, this function will be executed and what we will simply do here.

You will get her state of the exchanges and we will set it to the exchanges we have here.

OK.

So let's do it like this.

How can we?

First of all, how we can get a state here, how can we get our local state, a lot of store in ah,

in this module, we can get it through the parameters of the actions functions.

Every every election, there is severe context object.

You can get your context object in a context object, specify lots of useful parameters that you can

that you can use.

So far, I will show you on this stage.

One can access the state of the context, but later I will introduce more, more, more parameters.

OK.

So for now, with only two boxes here, even in context, I can distract tries whatever context they

present and I can get specifically from the context state.

That's what you can get from the context state.

And this is a state.

What do you have up here?

OK, so after this one second, after the call to get exchanges, I'll get a state.

Remember, on the state, they have exchanges a lot of the exchanges and I will send to the exchanges

exchanges I have here in a variable of exchanges.

All right.

OK, I know it doesn't make much sense, but we might have action is why I need to do this, but I just

want to simulate here what's going to happen in the normal case.

OK, I will save it.

And now they need to go to home.

VIDEO and Dot View if you call this civil dispatch here to get exchange as this action.

But what's a good spot for it?

And then talk about this much, but we have a lifecycle functions and a good initialization lifecycle

functions are mounted and the other one is created, and these lifecycle functions are called only once

the manual component, your home page is initialized.

So what's the difference between the mounted and the created by the debugger?

So you can see that the debugger here and debug error here?

The difference main difference is that the mount that is called before the created or actually other

around my mistake created is called the B4 mounted.

Created is called whenever your internal representation of the page is created as an instance in the

memory, all or all of the data you get some data here all received all the props all received here

and this stuff mounted is called whenever your page is mounted into the DOM into document object model,

so it's either displayed on the on screen.

I'll show you.

So let's see.

Let's leave here this to the Bhagyaraj.

Go to your browser, open here console and refresh, and you will see the created.

It's called first.

We don't have any representation of our of our home here yet, so we'll click here this arrow to continue

in execution or script execution.

You can see up here or this arrow here.

Click it and you will see in the mouth and it's called the elderly, the page exists, OK, so it's

mounted into the dome document object model, basically into the HTML.

OK, so that's a difference, and for this reason, we'll be using that created to fetching for a fetching

data.

Alright, because mother is going to late there and I would like to get my data as soon as it's possible,

so I will use a create the lifecycle function.

OK, and I created you already see you already saw before that.

How we can this page action just clear this dollar sign store call that is page on this and this projection?

Harvey are calling this action a very simple one and get exchanges connected just like this.

And let's save it.

And after that, money will go to browser.

You'll refresh.

After one second, you should receive your data.

OK, so that said, time out, we are getting our data, so let's recapitulate, guys.

How does it work?

So the first thing that we are starting this chain of the action starts in the created lifecycle function,

right?

So we are calling here.

Dispatch we are dispatching here to the exchanges.

All right.

They're expecting this or this is landing in our view store in a.

Inactions he writes or Wilczek ActionScript speech and good exchanges, so to will execute this action

here, good exchanges.

And this is going to love your stories of the Explorer, but then executing to get exchanges is passing

US state and this state is a representation of the state here.

OK, so they are calling here, but we are dispatching it.

We are calling this function and we are calling.

Therefore, therefore we are calling the timeout, the calling, set timeout and set timeout.

It's a timing out the execution of the function provided inside.

So this callback function here will be executed after one second.

After one second, Avila is sent to the state exchanges here to this state, here by exchanges from

up here.

OK.

These exchanges, so this will happen after one second, I look at my state exchanges and you know that

they are linking together our home vote, bit the state through the consulate properly.

So whenever it is sort of state will change.

Also, the computer will be executed and will display the new data on the screen.

And that's how it exactly how that how does it work?

This is about how it works.

All right, guys, so that's going to be it for all these electronic questions, if something is not

clear.

Ask in a Q&A and I will see you in the next.

Well.

Yes.