createaction

18 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

createAction usage with createReducer

Action creators created by createAction can be passed directly to the addCase method in a createReducer builder callback.

createAction function signature

createAction is a helper function that takes two parameters: type (required) and prepareAction (optional). It has the signature: function createAction(type, prepareAction?)

createAction returns an action creator

createAction returns an action creator function that generates Redux actions. The action creator can be called without arguments (returning an action with just the type) or with a payload argument (which becomes action.payload).

createAction prepare callback

createAction accepts an optional second parameter called a prepare callback. This callback receives all arguments passed to the action creator and must return an object with a payload field. The callback can optionally also return meta and error fields. The prepare callback allows customizing payload creation with additional logic such as accepting multiple parameters, generating random IDs, or adding timestamps.

createAction prepare callback return object structure

The prepare callback must return an object with a payload field (required). It can optionally include meta and error fields. The type field is added automatically and should not be included in the return object. The payload, meta, and error fields adhere to the Flux Standard Actions specification.

createAction with TypeScript generic

createAction can be used with a TypeScript generic parameter to specify the payload type, for example: createAction<number>('counter/increment')

createAction.match method

Every action creator returned by createAction has a .match(action) method that determines if a passed action is of the same type as an action created by that action creator. This method is a TypeScript type guard that can narrow the payload type of an action.

createAction.match as TypeScript type guard

The .match(action) method returned by action creators can be used in if statements to narrow the type of action.payload as a TypeScript type guard. This is particularly useful in custom middlewares where manual type casts would otherwise be necessary.

createAction.match with redux-observable

The .match(action) method can be used as a filter function in redux-observable epics. For example: actions$.pipe(filter(increment.match), map((action) => {...})). This allows filtering actions by type while maintaining correct TypeScript inference of the payload.

createAction example with prepare callback

Example: const addTodo = createAction('todos/add', function prepare(text: string) { return { payload: { text, id: nanoid(), createdAt: new Date().toISOString(), }, } }). This creates an action creator that accepts a text parameter and generates a todo object with text, a unique ID, and creation timestamp.

Redux 5.0 action types must be strings

As of Redux 5.0, action types are required to be strings. An error will be thrown by the store if a non-string action type reaches the original store dispatch.

createAction generates action creators

createAction takes an action type string and returns an action creator function. The action creator takes one argument and puts it in the `payload` field of the returned action object. Example: `const addTodo = createAction('ADD_TODO'); addTodo({ text: 'Buy milk' })` returns `{ type: 'ADD_TODO', payload: { text: 'Buy milk' } }`

createAction .type property

Action creators returned by createAction have a `.type` property that contains the action type string. This allows you to use the action creator itself in places that expect an action type, or reference actionCreator.type in switch statements or other type checks.

Using createAction in createReducer with addCase

When using createAction with createReducer, you can pass the action creator directly to builder.addCase(), and the action type will be correctly inferred by TypeScript. You can also reference actionCreator.type explicitly, though type inference will not work that way.

createAction with generic type argument

For most cases, use createAction with a single generic argument specifying the payload type: createAction<number>('test'). This creates an action of type PayloadActionCreator<number, string>.

createAction with literal action type

To specify a literal type for action.type, provide both the payload type and the literal type string as generics: createAction<number, 'test'>('test'). Unfortunately this requires specifying the type twice.

createAction using prepare callback for type inference

To avoid duplicating the action type string, use a prepare callback with a generic helper function: createAction('test', withPayloadType<string>()). Both type parameters can be inferred from arguments this way.

Use createAction match method as type predicate

Created action creators have a match method that acts as a type predicate. Use it to narrow action types in conditionals: if (increment.match(action)) { action.payload } is correctly typed.

Give your agent this brain