What is a Payload in Redux context

tl;dr

Payload is a non-official, community accepted (de facto) naming convention for the property that holds the actual data in a Redux action object.

Official Documentation

The official documentation only states that a Redux action has to be a plain object and needs a string action type:

A plain object describing the change that makes sense for your application. ... Actions must have a type field that indicates the type of action being performed. Types can be defined as constants and imported from another module. It's better to use strings for type than Symbols because strings are serializable. Other than type, the structure of an action object is really up to you. If you're interested, check out Flux Standard Action for recommendations on how actions could be constructed.

Community Best Practices

Lots of things are not standardized in Redux so you have maximal flexibility to do the things in your own way, but since most of us don't want to come up with a custom solution to every little everyday detail, the community tends to establish best practices.

To separate this type from regular data the payload property is used. Now, on what should go into payload and what should be on the same level with it is debatable, but a popular standard (recommended by the official docs too) is the Flux Standard Action which states that among the official requirements you may add a payload, error, and meta property. Here the payload is defined as:

The optional payload property MAY be any type of value. It represents the payload of the action. Any information about the action that is not the type or status of the action should be part of the payload field. By convention, if error is true, the payload SHOULD be an error object.


An action object has a type:

{
  type: "DELETE_POST",
  id: 123
}

besides the type, it usually has some kind of data that provides more information about this action. This is called "payload". In the above action object, the id is the payload.

Some programmers would write it in such a way:

{
  type: "DELETE_POST",
  payload: {
    id: 123
  }
}

and it is mainly a matter of style / convention.


Some more details:

In some other situations, the payload could be an array of data, such as an array of JavaScript objects.

Wikipedia defined it quite well:

In computing and telecommunications, the payload is the part of transmitted data that is the actual intended message. Headers and metadata are sent only to enable payload delivery.

Can we say that the action type is also part of the payload? Perhaps we can, if we look at it this way:

instruction: BUY_FROM_SUPERMARKET
items:       ["egg", "milk", "lettuce"]

In this case, I think it is reasonable to consider BUY_FROM_SUPERMARKET as part of the message and therefore, part of the payload, but in Redux, it is not, but I guess it is just the way it is.


Payload is what is keyed ( the key value pairs ) in your actions and passed around between reducers in your redux application. For example -

const someAction = {
  type: "Test",
  payload: {user: "Test User", age: 25},
}

This is a generally accepted convention to have a type and a payload for an action. The payload can be any valid JS type ( array , object, etc ).

Hope this clarifies your doubt!

Tags:

Redux