createAction

Generates an action creator for a specific action type.

// JavaScript
function createAction(type)
// TypeScript
function createAction<T extends string | symbol | number>(
type: T
): BasicActionCreator<T>

Details

createAction takes an action type value and returns an action creator which produces actions of that type.

For a version of the action creator which accepts a payload value and attaches the returned action, call the withPayload() method (e.g., createAction("…").withPayload().)

In addition to withPayload(), action creators returned by createAction() have the following properties:

  • type: The type value passed to createAction(). Removes the need for a separate action type constant, and allows other helpers such as onAction to inspect the type value of the produced actions at runtime.

  • matches(action): A method that returns true the the passed action has the same type as the ones produced by the action creator.

TypeScript Notes

  • .withPayload() is defined with a type parameter that specifies the payload type. You can override the default (any) by specifying the type parameter explicitly:

    const incrementBy = createAction('incrementBy').withPayload<number>();
  • .matches() is defined as a type predicate. Using it in a condition allows the TypeScript compiler to narrow the type of passed action to the specific type of action returned by the action creator:

    if (incrementBy.matches(action)) {
    const amount = action.payload
    // Type is inferred to be `number` due to matches()
    }

Examples

Defining a basic action:

import { createAction } from 'redux-preboiled'
const increment = createAction('increment')
increment()
// => { type: 'increment' }
increment.type
// => 'increment'

Defining an action with payload:

import { createAction } from 'redux-preboiled'
const multiply = createAction('multiply').withPayload()
multiply(2)
// => { type: 'multiply', payload: 2 }
multiply.type
// => 'multiply'
multiply.matches({ type: 'multiply', payload: 1 })
// => true
multiply.matches({ type: 'increment' })
// => false

Specifying the action payload type (TypeScript):

import { createAction } from 'redux-preboiled'
const multiply = createAction('multiply').withPayload<number>()
multiply(2)
// OK
multiply('2')
// ERROR: Argument of type '2' is not assignable to parameter of
// type 'number'.

See Also