Passing Parameters to Actions

Learn how to pass parameters to actions.

While the type property in an action is enough for reducers and middleware to know what action to process, more information will be useful or required in most cases.

For example, instead of sending the INCREMENT_COUNTER action ten times, we could send a single action and specify 10 as an additional parameter. Since actions in Redux are nothing more than objects, we are free to add as many properties as needed. The only limitation is that Redux requires the type property. Suppose we decide to add a recipeId property as shown here:

store.dispatch({
  type: 'MARK_FAVORITE',
  recipeId: 21
  ...
});

The whole object passed to dispatch() will be available to our reducers:

const reducer = (state, action) => {
  console.log(action);
  return state;
}

// -> { type: 'MARK_FAVORITE', recipeId: 21, ... }

To ensure that our actions are consistent across a large code base, defining a clear scheme for how the action objects should be structured is good. We will discuss the scheme later.

Get hands-on with 1200+ tech skills courses.