Original subtitles

In this lecture, we're going to refactor our code base with actions.

Currently, I'm looking at the register function we created in the register form component.

Two requests are being made inside the function.

One request is for the authentication service.

Another is for the database.

Both requests are necessary for registering the user.

Aside from this, the rest of the function updates the properties for the alert messages.

The code we've written in the function can be broken down into two parts.

There's the logic for manipulating the component and another for manipulating the state.

We should separate this logic.

The code for manipulating the state will be put into an action function.

We'll leave the rest inside the component.

Let's begin using action functions.

Switch to the store file where our state is managed.

Inside the exported object, we're going to add a property called actions.

The action's object is where we can define action functions.

Inside this object, we're going to create our first action function.

We'll call it register.

On this function ad the async keyword.

We're going to perform a synchronous requests inside the function.

In addition, I'm using a regular function, not an arrow function.

The developers of Peni recommend regular functions for one reason the this keyword gives us access to

the state.

If we were to use arrow functions, we would not be able to interact with a state from our actions.

The register function will make a request to the authentication and store services.

We've already written the code for making these requests.

We can copy them over to this function, switch to the register form component file.

The requests are made in the try blocks, cut both pieces of code inside the try blocks.

Paste them over to the register.

Function in the store.

Here's what you should have in the register action function.

We were calling the create user with email and password and add functions.

We're going to remove the assignment to the user credentials variable because we don't need to log it

anymore.

If you're using Visual Studio code like me, you may be receiving errors because the authentication

and users collection objects are not defined.

We'll need to import them.

We can copy the import statements from the register form component, switch back to it, cut and paste

the import statement over to the store file.

There's one last thing we will copy over to the register action function in the register.

Function for the register form components.

Cut the line of code where we update the user logged in state property pasted at the very end of the

register action function.

Like I said before, we can access the state of a store from within an action by using the this keyword.

The next step is to update the argument values inside both functions.

If we look carefully, we are attempting to access the values object from the component.

However, we're not in the register form component.

We don't have access to this data property anymore.

We'll need to pass them on to the register.

Action Function.

Action functions must be matched to a component before they can be called switch to the register form

component.

First, we're going to clean things up a bit.

There are two empty tree blocks.

We don't need both of them.

We're going to remove the second try catch block all together.

The variable user credentials is not being used anymore.

We can remove the variable definition and the log statement.

Time to map the action at the top of the script.

BLOCK Replace the map writable state function with the map actions function.

Since we're not manipulating the store from within the components, we don't need the function for writing

to the state.

The map actions function will assist us with mapping the action functions to the component in the computed

object.

Replace the map writable state function with the map actions function.

And the second argument the array must contain a list of functions to map to the component.

There's just one problem.

The name of the function in the store conflicts with the name of the register method from within the

component.

Luckily, the map actions function supports aliases like the other mapping function.

Replace the array with an object.

The alias for the register function will be called create user.

Before calling this function.

Actions are not meant to be mapped to the computed object and said they must be mapped to the methods

object.

Move the map.

Actions function from the computed object to the methods object.

We can safely remove the computed object from the components configuration options.

Let's scroll to the try block inside this block called the this dot create user function with the O8

keyword.

We can pass on data to an action function like we would any other function.

Let's pass on the values arguments.

Let's accept the data being passed into the function back in the store.

Update the register functions argument list to accept the values argument.

We've successfully created an action function that will register the user in both the authentication

and store services.

It's accessible to every component in the application by using pinions mapping functions.

We've refactored a lot of code so far.

Head on over to the browser.

We'll register a new user into the application.

Well, want to check the Firebase console to verify that the user was created.

Let's switch over to the database and refresh it.

We'll find a new document in the users collection.

It has the same information I've inputted into the form.

Great.

Let's head back to the user store file.

There's one thing I want to mention about the action function.

You'll notice I'm not wrapping the requests with a try catch block.

While it's not necessarily wrong to handle errors in an action function, we don't need to.

In this case, we can let individual components handle it.

This strategy allows for more flexibility.

If components need to handle errors differently, they can.

That's all there is to it.

By using actions, we have a reusable function for registering the user.

The register action is available globally to every component in the application.

Hopefully I have convinced you to use actions.

The best part about actions is that they're reusable.

If we had an admin dashboard, we don't have to worry about writing the request twice.

We can dispatch the action as we did in the register function.