Skip to content

Commit 0b8f279

Browse files
Andreasmarkerikson
authored andcommitted
Add explanation of createAction prepare callback to the API docs (#204)
* Add explanation of the second argument of createAction to the API docs * Update createAction.md
1 parent ecc9bd3 commit 0b8f279

File tree

1 file changed

+37
-1
lines changed

1 file changed

+37
-1
lines changed

docs/api/createAction.md

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ hide_title: true
1010
A helper function for defining a Redux [action](https://redux.js.org/basics/actions) type and creator.
1111

1212
```js
13-
function createAction(type)
13+
function createAction(type, prepareAction?)
1414
```
1515
1616
The usual way to define an action in Redux is to separately declare an _action type_ constant and an _action creator_ function for constructing actions of that type.
@@ -47,6 +47,42 @@ console.log(`The action type is: ${increment}`)
4747
// 'The action type is: counter/increment'
4848
```
4949
50+
## Using Prepare Callbacks to Customize Action Contents
51+
52+
By default, the generated action creators accept a single argument, which becomes `action.payload`. This requires the caller to construct the entire payload correctly and pass it in.
53+
54+
In many cases, you may want to write additional logic to customize the creation of the `payload` value, such as accepting multiple parameters for the action creator, generating a random ID, or getting the current timestamp. To do this, `createAction` accepts an optional second argument: a "prepare callback" that will be used to construct the payload value.
55+
56+
```js
57+
import v4 from 'uuid/v4'
58+
59+
const addTodo = createAction('todos/add', function prepare(text) {
60+
return {
61+
payload: {
62+
text,
63+
id: v4(),
64+
createdAt: new Date().toISOString()
65+
}
66+
}
67+
})
68+
69+
console.log(addTodo('Write more docs'))
70+
/**
71+
* {
72+
* type: 'todos/add',
73+
* payload: {
74+
* text: 'Write more docs',
75+
* id: '1b9d6bcd-bbfd-4b2d-9b5d-ab8dfbbd4bed',
76+
* createdAt: '2019-10-03T07:53:36.581Z'
77+
* }
78+
* }
79+
**/
80+
```
81+
82+
If provided, all arguments from the action creator will be passed to the prepare callback, and it should return an object with the `payload` field (otherwise the payload of created actions will be `undefined`). Additionally, the object can have a `meta` field that will also be added to created actions. This may contain extra information about the action. These two fields (`payload` and `meta`) adhere to the specification of [Flux Standard Actions](https://github.com/redux-utilities/flux-standard-action#actions).
83+
84+
**Note:** The type field will be added automatically.
85+
5086
## Usage with createReducer()
5187
5288
Because of their `toString()` override, action creators returned by `createAction()` can be used directly as keys for the case reducers passed to [createReducer()](createReducer.md).

0 commit comments

Comments
 (0)