What is a Payload in Redux context

Question

Can someone please explain what exactly a Payload is in Redux context? In layman terms please, the technical term wasn't useful. Hence still the confusion.

What I understand is that Payload is the actual data that is transmitted over the network. Does this mean, Payload of an action in Redux context means that the data that is passed as a parameter while an action is emitted to change the Redux state?

Answer 1

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.

Answer 2

Payload is what is bundled 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!

Answer 3

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.