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>


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()


Defining a basic action:

import { createAction } from 'redux-preboiled'

const increment = createAction('increment')

// => { type: 'increment' }

// => 'increment'

Defining an action with payload:

import { createAction } from 'redux-preboiled'

const multiply = createAction('multiply').withPayload()

// => { type: 'multiply', payload: 2 }

// => '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>()

// OK

// ERROR: Argument of type '2' is not assignable to parameter of
// type 'number'.

See Also

Last updated