Actions
Defining Redux actions commonly involves two declarations: an action type constant with the
type value to use, and an action creator to generate actions of that type.1
// Without Preboiled
2
3
const INCREMENT = 'counter/increment'
4
const DECREMENT = 'counter/decrement'
5
const MULTIPLY = 'counter/multiply'
6
7
const increment = () => ({
8
type: INCREMENT
9
})
10
11
const decrement = () => ({
12
type: DECREMENT
13
})
14
15
const multiply = amount => ({
16
type: MULTIPLY,
17
payload: amount
18
})
Copied!
This is a straight-forward pattern with several upsides, but it's also a quite verbose one. Preboiled's
createAction helper, described in this guide, helps you reduce the noise while keeping the benefits. Here is the equivalent code using createAction:1
// With Preboiled
2
3
import { createAction } from 'redux-preboiled'
4
5
const increment = createAction('counter/increment')
6
const decrement = createAction('counter/decrement')
7
const multiply = createAction('counter/multiply').withPayload()
Copied!
The following sections explain
createAction and its capabilities in more detail.Simple Actions
The
createAction helper allows you define an action with a single declaration, minimizing boilerplate and room for error. Given an action type value, it returns a matching action creator.1
import { createAction } from 'redux-preboiled'
2
3
const increment = createAction('counter/increment')
4
5
increment()
6
// => { type: 'counter/increment' }
Copied!
The action type value is made available as a
type property on the returned action creator (e.g., increment.type in the example above). This means you don't need to define a separate action type constant.1
increment.type
2
// => 'counter/increment'
Copied!
The action creator also gets a
matches() method that compares its type with that of a given actions, and returns true if they match. In TypeScript, this method is defined as a [type predicate][ts-type-predicate], so that the compiler can narrow the type of the action in code sections where matches() is true:1
if (increment.matches(action)) {
2
// The type of `action` is `Action<'increment'>` here
3
}
Copied!
These additions allow some of Redux Preboiled's other helpers to accept a
createAction action creator in place of an action type value. For instance, onAction (described in the Reducers guide) lets you specify the action type by directly passing increment instead of increment.type or 'counter/increment'. This is especially beneficial if you use TypeScript, where the action creator's static type is used for automatic type inference.By default, the action creators returned by
createAction produce basic actions with nothing more than a type. But this can be changed, as described in the next section.Payload Actions
Often, you need to add extra data to actions. For these cases,
createAction allows you to generate payload action creators. These take a single argument and attach it to the returned action as payload.To make a payload action creator, call
.withPayload() on an action creator returned by createAction:1
const multiply = createAction('counter/multiply').withPayload()
2
3
multiply(2)
4
// => { type: 'counter/multiply', payload: 2 }
Copied!
In TypeScript, you can specify the type of the payload as a type parameter:
1
// TypeScript
2
3
const multiply =
4
createAction('counter/multiply').withPayload<number>()
Copied!
If you need to attach more than one value to an action, you can use an object as payload:
1
const logIn = createAction('auth/logIn').withPayload()
2
3
login({ username: 'alice', password: 'ecila' })
4
// =>
5
// {
6
// type: 'auth/logIn',
7
// payload: { username: 'alice', password: 'ecila' }
8
// }
Copied!
Next Steps
Defining actions is one thing, but you also need the reducers to handle them. Redux Preboiled can help you with that too, as you'll see in the Reducers guide.
Last modified 7mo ago
Copy link