Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,120 --> 00:00:05,110
In this lecture, we're going to take a step back to discuss designing our state.
2
00:00:05,130 --> 00:00:11,130
The reason we're going to discuss this topic is because we're going to refactor our code with actions.
3
00:00:11,310 --> 00:00:15,100
We've successfully registered and authenticated the user.
4
00:00:15,120 --> 00:00:18,890
The code we've written is isolated in a single component.
5
00:00:18,900 --> 00:00:23,730
In some cases, you may want to register a user in multiple locations.
6
00:00:23,730 --> 00:00:28,230
For example, you may build an admin interface for managing the application.
7
00:00:28,230 --> 00:00:32,130
This admin interface may include a feature for creating accounts.
8
00:00:32,130 --> 00:00:36,210
It isn't uncommon to build such a feature in those cases.
9
00:00:36,210 --> 00:00:39,030
It would make sense to make the code more reusable.
10
00:00:39,030 --> 00:00:44,850
Currently, if we wanted to create an account in another part of the application, we'd have to rewrite
11
00:00:44,850 --> 00:00:46,020
a lot of the code.
12
00:00:46,020 --> 00:00:49,200
Pernia comes with a solution called actions.
13
00:00:49,200 --> 00:00:53,010
Actions are functions for outsourcing business logic in the store.
14
00:00:53,010 --> 00:00:56,400
Simple as that we can define functions in a store.
15
00:00:56,430 --> 00:00:59,760
These functions will become available to all components.
16
00:00:59,760 --> 00:01:04,769
If you are familiar with View X, Peneha has a different approach to actions.
17
00:01:04,769 --> 00:01:07,590
From actions we can perform mutations.
18
00:01:07,590 --> 00:01:13,290
This feature is completely different from other state management libraries where mutating the state
19
00:01:13,290 --> 00:01:14,370
is disallowed.
20
00:01:14,550 --> 00:01:17,040
There are advantages to using actions.
21
00:01:17,040 --> 00:01:22,860
Firstly, they are available to all components in the register form components.
22
00:01:22,860 --> 00:01:28,200
Any methods defined in the configuration options are isolated to the components.
23
00:01:28,200 --> 00:01:33,060
They can't be used elsewhere unless we pass down the methods as props.
24
00:01:33,060 --> 00:01:37,140
By using actions, they can be exposed to any component.
25
00:01:37,170 --> 00:01:40,950
Another advantage is that actions can be asynchronous.
26
00:01:40,950 --> 00:01:45,270
Since actions are not logged, there isn't a reason to keep track of them.
27
00:01:45,270 --> 00:01:49,110
Lastly, actions can commit multiple mutations.
28
00:01:49,110 --> 00:01:52,290
This can help reduce the amount of code you have to write.
29
00:01:52,320 --> 00:01:58,710
One last thing before we get into writing action functions, I want to make it clear as to when you
30
00:01:58,710 --> 00:02:03,090
would want to define an action instead of defining a method inside a component.
31
00:02:03,120 --> 00:02:08,970
Here's a general rule of thumb If a code you write will affect the state, you'll want to write it as
32
00:02:08,970 --> 00:02:13,020
an action, otherwise, define it as a method for the component.
33
00:02:13,020 --> 00:02:18,300
For this reason, we're going to refactor the code we've written for the registration form.
34
00:02:18,300 --> 00:02:21,930
We'll start the refactoring process in the next lecture.
3529
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.