Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What are the advantages of putting data inside a "payload" key in a Redux action?

I haven't found a good answer to this anywhere, and it seems like a pointless convention. In lots of tutorials and documentation, Redux actions are defined like this:

{
  type: "ACTION_NAME",
  payload: {
    foo: 123,
    bar: 456,
  }
}

What's the point of the payload object? Why not just write this:

{
  type: "ACTION_NAME",
  foo: 123,
  bar: 456,
}

I'm using Flow, and I like defining all of my action types as a union, without nested payloads:

type Action = {
  type: 'ACTION_NAME',
  foo: number,
  bar: number,
} | {
  type: 'ANOTHER_ACTION',
  someData: string,
} | {
  type: 'ONE_MORE_ACTION',      
  moreData: boolean,
}

I don't have to type payload so many times, and I get autocompletion and type checking for all of my actions, so I'm not sure what I'm missing.

Am I missing out on some benefits by not putting all of my data inside a payload object?

like image 650
ndbroadbent Avatar asked Apr 29 '17 06:04

ndbroadbent


1 Answers

This convention is know as Flux Standard Actions and the motivation for it is set out by Andrew Clark as

It's much easier to work with Flux actions if we can make certain assumptions about their shape. For example, essentially all Flux actions have an identifier field, such as type, actionType, or actionId. Many Flux implementations also include a way for actions to indicate success or failure, especially as the result of a data-fetching operation. Defining a minimal, common standard for these patterns enables the creation of useful tools and abstractions.

His full proposal for FSA is worth reading.

https://github.com/acdlite/flux-standard-action

In short it makes writing middleware, such as Sagas easier and can also help Reducers deal with error states.

like image 57
David Bradshaw Avatar answered Oct 10 '22 01:10

David Bradshaw