Standalone actions
A cross-slice or application-wide event needs a single reusable creator.
Redux Toolkit · Function
createAction
createAction combines an action type and creator into one helper. It returns a callable action creator whose argument normally becomes payload, with an optional prepare callback for custom action construction.
How it works
createAction combines an action-type declaration with its action-creator function. It returns a callable creator that accepts one payload argument by default, or uses an optional prepare callback to construct the payload and related action fields.
Syntax
createAction(type, prepareAction?)Parameters
| Name | Type | Description |
|---|---|---|
type | string | The string identifying the Redux action type. |
prepareAction | function | Optional callback used to construct the payload value and prepared action contents. |
Returns
An action creator for the supplied type; invoking it creates an action, with the argument normally assigned to payload.
Key points
- It provides one helper for declaring both the action type and the function that creates actions.
- The supplied type string becomes the type associated with every action produced by the returned creator.
- Callers may invoke the creator with no argument or provide a value that is attached as the payload.
- It removes the need to separately write an action-type constant and a matching action-creator function.
- The optional prepare callback lets the creator construct the payload rather than requiring callers to supply the final payload directly.
Common mistakes
- Without a prepare callback, the creator treats its single argument as the complete payload; callers must build that payload themselves.
- Do not assume every action creator requires an argument: creators can also produce an action without a payload.
Example: Creating a standalone typed action
import { createAction } from '@reduxjs/toolkit'
export const todoAdded = createAction<{ id: number; text: string }>('todos/todoAdded')
const action = todoAdded({ id: 1, text: 'Learn Redux Toolkit' })
console.log(action)
// { type: 'todos/todoAdded', payload: { id: 1, text: 'Learn Redux Toolkit' } }Creates a typed action creator and invokes it with the payload required by the action.
When to use it
Prepared payloads
Callers need to pass convenient inputs that must be converted into a payload.
Actions outside a slice
An action is not owned by a particular slice reducer.
Interview questions
QWhat does createAction return?
createAction takes an action type and returns an action creator for that type. Calling the creator produces an action whose type is the supplied string and whose argument is normally assigned to payload.
Follow-up: When would a prepare callback be useful? It is useful when callers provide convenient inputs that must be transformed into the final payload, or when the action should include additional prepared metadata.
QWhat are the parameters of createAction?
The standard signature is createAction(type, prepareAction?). The first parameter identifies the action type, while the optional second parameter prepares the payload and other action properties.
Follow-up: How does the default behavior differ from prepared actions? By default, the single call argument becomes action.payload; preparation lets the callback construct the action contents instead.
QWhen should createAction be used instead of relying on generated slice actions?
A standalone action creator is useful for actions that are not tied to one slice. createSlice usually generates action creators for slice reducers, while createAction directly creates one from a type string.
Follow-up: What alternative should usually be preferred for slice-owned actions? Use createSlice, which defines reducers and automatically generates corresponding action creators and action types.
Related
createSlicecreateReducercreateAsyncThunk