Action – capture the intent

An action is something as simple as an intent with accompanying data, that is, a message. How does an action come about though? An action comes about when a user interacts with a UI. The user may select a specific item in a list or a press a button with the intention of submitting a form. Submitting the form should, in turn, lead to a product being created.

Let's look at two different actions:

• Selecting an item in a list, here we are interested in saving the index of our selected item
• Saving a todo to a todo list

An action is represented by an object. The object has two properties of interest:

• The type: This is a unique string that tells us the intention of the action, for example, SELECT_ITEM
• The data: This is the data we mean to persist, for example, the numerical index of a selected item

Given our first example action, a code representation of that action would look like the following:

{
  type: 'SELECT_ITEM',
  data: 3 // selected index
}

OK, so we have prepared our action, which we can also think of as a message. We want the message to be sent so that the selected item is highlighted in the UI. As this is a undirectional flow, we need to follow a charted course and pass our message over to the next party, which is the dispatcher.