All language subtitles for 5. Composition API

In the last lecture, we have simplified to map state function, we have simplified the way have you

are getting that data back in this lecture, I would like to talk about a composition of API.

All right, let's begin and the composition API, what will allow us.

It's called like this, it's a comb for composition.

API, so the composition API, they can create chunks of reusable functionality survive, you expect

something to repeat in your code, you can drop it in the composition API and then you can reuse it

in the multiplayer component.

In our case, composition API will be using IT authentication because are components, multiple components,

they'll be working without authentication.

So that's a pretty good example.

Competition API is still a kind of a new thing in in a view.

So it's a good to now.

Let's initialize it.

It'll be pretty straightforward.

Go to the SASE folder and essentially folder what's called a new folder.

And let's call it composition composition.

In the composition of folder, I will create a new file and it'll create here.

For now example, they'll be working with the register function.

Total free market.

Usually what you are doing with a composition of functions, you are prefixed in them with, they use

keywords.

So if you are use of the React, React is using a similar approach.

OK, so your jazz was inspired by this.

The reactors using their hook functions, they are also prefixed with the use keyboard, and that's

only convention.

You can call, of course, your function as you want, does it?

That's a convention that you know, that you are working with the composition of functions, and we

would like to provide to the composition API register function for now.

So that idea use register dot.

That's a normal JavaScript function.

It's not a view, OK?

In the EU's register, you will export default export default function.

OK, we'll call it the EU's register.

That are like this.

And a lot of the packages that are currently in the villages, they are already supporting the composition

API.

So in this case, what do want to do?

You would like to move the function of the register to the composition API, as you can see here in

the register, I'm using this store to access as this page, but in the composition of function, I

will not have access to this context to this store.

So the way we'll get this story in this way, villagers here use storage function.

It's already provided from the US, so it's very important to use store.

And you can get it from the US, so a lot of the new packages, they are already offering a this composition

API.

OK, maybe they used to, or I can simply ask for my view stories, but I have a store and they use

store.

And they start.

OK, and that I can define here marriages register of functions, so I'll rather simply cons register,

I can define it as the error function.

I can define its error function and retrieve the forum through its parameters, and it will call store

and dispatch and dispatch user select register and will provide a forum data to do exactly the same

as you see here in the register.

OK.

Getting out of form regardless, but you get.

OK, but here I am specifying that I will pass the reform data to the registrar, you will see why.

OK.

So now I can remove the form here because I have only one parameter, so I don't need to repeat.

I don't need to provide a parentheses.

OK, and to the value will provide the data back to your page is the director and.

Right turn, and you will return this back to the page.

OK, I'll write you a diagram, so there'd be easier to understand.

OK, so we have our.

View component, right?

It be you.

Component tests can be a registered page.

All right.

If you'd like to get here, the electric headache here, these the Israelis, their function into the

view component.

OK, so we have then a composition API function.

So we have this use register.

OK, in order to to extract this register function of what we have just defined here to our component.

We need to call here to set up a function, set up function, and we need to call user register in the

set up.

And it will never be returning you to function.

It'll be extracted into our component.

So what was different?

Well, they're very, very obvious registering to call in the set up to get these data to the component.

OK, I think it'll be easier to understand, maybe been able to show you in the code.

So you are returning the register function and now we can go to registered a few.

I can go put together eight of the methods.

I don't need them now.

And instead of these, I've already here set up show up here.

Like this a setup.

I only just simply return here and use a register function, so we need to import this function so important

here.

Use a register from we are going to the output of this folder composition use register and simply be

able to do this.

OK, set up and we are returning here to use the register.

Now, whatever we have returned from his registered charities are Object, which is containing a register.

Which is the function of dispatching that forum.

OK, we can call it but better, we'll call it simply for now, all they can do, we can go up here

into the battle.

And on a click, they are calling her, you start by being too passive their data.

Of course, I will provide as a callback function and call the register of a positive or my forum.

OK, so what I'm calling here.

Is my register a proper use register here?

Let's try it out, so you will see it actually, so let's say it will go back to browsers and you can

also read a debugger as if you want or if you want to see the debugger.

We can just drop it in the curly brackets.

So you see that they are dispatching it indeed all their debugger.

Let's go back to browsers.

OK, and we don't see here anything so we can inspect the error.

Type at or object is a they function.

OK, I think I was importing broccoli the function.

Get back to your registered to view and scroll up into the imports you see here.

And I think her curly brackets register, but they've all got to use register your export they get by

default, which means this is not a not a name export, but is the default export.

And then you have a default export.

You are not specifying curly brackets you can just import straight away to the register.

OK, so that was the issue.

And now we can save it.

They can go back and out of the box and I will sign up the processing and we are done.

And in this case, I should see it over here.

Yeah.

OK, I'm in my console, so remember the back of your head, let's sign up and we get to get a debugger.

You can see the register.

From the youth register is execu that we are passing here.

Forum Considere Forum is email is their name, password and password confirmation, which are empty

strings and that they are dispatching to the store.

And that's basically how it works.

OK, so back to here we can, the reality is we don't need here any debugging Arabica to be a nice one

liner and now you know how the competition is working.

Maybe it's still not clear here.

Here are how we are getting these register function here.

If it's still not clear what you can do, you can just simply extract this so you can grab your Const

Konst register.

OK.

But you are getting from a user registered.

This is actually like this.

The is texturizing register and these are returning here.

I'll check with the register.

OK.

So if it's more explicitly to you now that user register returns, you and you'll take a look this object

to the register that would have this texturizing here, and I'm returning it to the page.

So that's why we can access register function of up here.

We are passing the form data into it, which is in the Entities Register function, which specifies

for data.

We are dispatching this action.

Let's try it out this way, as they specified in a step function.

Good, save it, we can go back.

Let's refresh, let's side up and you can see everything is working as before getting error.

So I don't like this that they are repeating here, which are set to return.

Here you register, and that's it.

Alka-Seltzer composition API register functionality is not a great example, because it is that affects

a lot of you'll be using only in the register, I would need something more usable.

I can use also in other pages and I'll show examples of this in the next lectures.

So guys.

Any questions related to this?

Don't worry, feel free to ask in the Q&A section.

I will be more than happy to provide your detailed explanations.

Let's go to the next lecture.

I will see you there.