Action Creators vs. Actions

Those who read articles or the official documentation of Redux will have encountered the two terms action and action creators. The difference is not completely clear in the beginning. The situation is further complicated because some use the terms interchangeably, although they differ in meaning. Let’s quickly dive into how action creators and actions differ.

Actions

Actions, which were introduced earlier, are simple, serializable objects that can be used to describe how exactly the state should change. They always contain a type property and often a payload.

Action creators

An action creator however, describes a function that returns an action. We could also say that it is a factory that creates actions. In most situations, action creators are used to encapsulate logic that is necessary to create an action. Sometimes, they are also used to abstract away complex logic from the actions themselves. In those cases, the action creator function is called instead of the action and passed to the dispatch method.

Typical action creators might take the following form using the previous example:

const add = (number) => {
  return { type: 'PLUS', payload: number };
};

const subtract = (number) => {
  return { type: 'MINUS', payload: number };
};

Or, here’s an example using ES2015+ shorthand notation:

const add = (payload) => ({ type: 'PLUS', payload });
const subtract = (payload) => ({ type: 'MINUS', payload });

Consequently, the action creators will be called as parameters of the dispatch method instead of passing an action directly:

store.dispatch(add(2));
store.dispatch(add(1));
store.dispatch(subtract(2));

Let’s see this example interactively: