Action naming

Using consistent naming makes it easier to navigate projects and understand the purpose of each Action

Naming conventions are an important part of any project, and the same goes for Actions and Action Folders.

Using consistent naming makes it easier to navigate projects and understand the purpose of each Action.

Summary/Cheat Sheet

If this is your first time on this page, we recommend skipping the cheat sheet and reading the full documentation instead. Our naming convention for Actions has three main rules:

• Start with a verb — using a verb helps clearly express the action or change that this Action will enact
• Use Title Case — for improved readability, capitalize the first letter of each word.
• Use descriptive names — add details about what the Action does. Is it triggering a request, setting a value, handling visibility, etc?

Starting Action names with a verb, using Title Case, and choosing descriptive names will help you stay organized. At a glance, you can grasp the purpose of each Action.

For folders, Choose names that are clear and descriptive of the types of actions within.

Action naming:

• Display Loader
• Submit Create User
• Submit Login User
• Render Product List
• Set Product Title
• Submit Delete Cart Item

Folder naming:

• Auth
• Product
• Cart
• Profile Settings

Actions in Folders:

• Auth/Submit Create User
• Auth/Submit Login User
• Product/Render Product List
• Cart/Render Product List
• Cart/Set Product Title
• Cart/Set Product Image
• Cart/Submit Delete Cart Item

Folder naming

Use folders to organize Actions so that you can locate them later. With that in mind, Folder naming should be pretty straightforward.

Choose names that are clear and descriptive of the types of Actions within.

Avoid using generic names like "Folder 1" or "Folder A". These names don't provide any information about the contents of the folder.

Instead, choose names that reflect the purpose of the Actions within the folder, such as "Auth", "User Settings", or "Cart".

But, don’t always try to fit your actions into those categories.

In some cases, you may want to render multiple product lists.

For example, if you are selling kitchen utensils, you may have a list of spatulas, knives, and ladles.

In this case, consider adding an extra dimension to your folder name.

Instead of using a folder called "Product" to contain everything, create three folders:

• Product Ladle
• Product Knife
• Product Spatula

You can also use the name of the parent component or a page to differentiate folder names.

Here are some examples:

• Product Home Recommended
• Product Home Knives
• Product About Recommended
• User Profile Settings
• User Payment Settings

Action naming

As mentioned in the summary, we have three main rules for naming Actions:

• Start with a verb
• Use Title Case
• Pick a descriptive name

That’s it! It gets a bit more nuanced than that, but these are the three main principles to keep in mind. Let’s dive into the weeds

Start with a verb

We recommend starting your Action names with a verb. Starting with a verb helps clearly express the action or change that this Action will enact.

Some common verbs that you might want to use are "Set", "Submit", "Update", "Render", etc.

With that in mind, each Action's name will start with a verb that describes what the Action does.

For example, consider these action names:

• Set User Image
• Render Product List
• Submit Create User

Each of these examples is short and informative. The Action name starts with a verb ("Set", "Render", "Submit"), making it clear what the purpose of the Action is.

Use Title Case

We recommend using Title Case for Action, and Folder names. Title case improves readability, and it makes each individual word more distinguishable.

Use descriptive names

Make your Actions descriptive, so that anyone who looks at the project can get a grasp of what each Action does.

For example, the folder for authentication Actions could be named "Auth", and an action for submitting a new user could be named "Submit Create User".

You can see that the Action name starts with the verb “Submit”, and is followed by the name of the request. In this case “Create User”.

So you would end up with Auth/Submit Create User.

This makes it extremely easy to grasp what the Action does.

So keep in mind, avoid using ambiguous names like these:

• Image
• List items

Instead, give context about what the Action performs.

• Set User Image
• Render Product List
• Submit Create User

Each one of these Action names is short but you still know at a glance, what each of these Actions does.

Whenever you’re unsure how to name an Action, ask yourself these questions:

• Is the Action triggering a request?
• Is the Action setting a value?
• What is this Action doing?

Then, simply name the Action based on your answer. This practice helps keep your naming convention intuitive and easy to understand for both yourself and others.

Is re-using Action names allowed?

The short answer is yes.

You can re-use Action names, as long as the Actions are in their own respective folders. The folder structure gives extra context that helps keep Actions unique, even if the Action name itself is identical.

Consider the Action name Set Title. This Action could be relevant in several different contexts within your web app. You might need to set the title for a user's profile, a product listing, or an item in a shopping cart.

So, using an Action name like Set Title multiple times in your build is perfectly fine, as long as you’re using a different folder name for each context.

Here’s an example:

• Profile Settings / Set Title
• Cart / Set Title
• Product / Set Title

Here’s an anti-example:

• Profile Settings / Set Title
• Profile Settings / Set Title

In this setup, Set Title is the action being performed, but the folder provides the context. In Profile Settings / Set Title, we're setting the title within the context of profile settings. In Cart / Set Title, the same action is being performed, but within the context of a shopping cart. By reusing Action names in this way, you maintain clarity and simplicity. The folder structure ensures that each Action's context is unique and descriptive.