# onAction

Creates a sub-reducer for a particular action type.

```js
// JavaScript

function onAction(type, getNextState?)
```

```ts
// TypeScript

function onAction<
  S = any,
  T extends string | symbol | number = any,
  A extends Action<T> = AnyAction
>(
  type: T,
  actionReducer: SubReducer<S, A>
): SubReducer<S>

function onAction<
  S = any,
  A extends Action = AnyAction
>(
  actionCreator: TypedActionCreator<A>,
  actionReducer: SubReducer<S, A>
): SubReducer<S>
```

## Details

`createAction` returns a sub-reducer that checks each incoming action's type against the one specified and, on a match, delegates to the passed reducer-like `getNextState` function. For non-matching actions, the sub-reducer simply returns the unchanged input state.

The action type to match against can be specifed in two ways. The simplest way is to pass the action type value. Alternatively, you can pass an action creator generated by [`createAction`](/api/createaction.md); in this case, the action creator's `type` property is used to determine the action type.

Note that the function returned by onAction is a *sub-reducer* - rather than proper Redux reducer - because it does not provide an initial state. Instead, it expects to be embedded into a full reducer which takes care of state initialization. Such a reducer can be generated using [`withInitialState`](/api/withinitialstate.md) and its `subReducer` parameter, or by combining `withInitialState` and [`chainReducers`](/api/chainreducers.md).

### TypeScript Notes

If you specify the action type using a `createAction` action creator, the type of the `getNextState` function's `action` parameter will be automatically inferred from the type of the action creator.

```ts
import { createAction, onAction } from 'redux-preboiled'

const multiply = createAction('multiply').withPayload<number>()
// multiply: PayloadActionCreator<number>

const multiplySubReducer = onAction('multiply', (state, action) => {
  // action: PayloadAction<number, 'multiply'>
  return state * action.payload
})
```

## Examples

Basic usage:

```js
import { onAction } from 'redux-preboiled'

const subReducer = onAction(
  'multiply',
  (state, action) => state * action.payload
)

subReducer(2, { type: 'multiply', payload: 4 })
// => 8

subReducer(2, { type: 'increment' })
// => 2
```

Specifying the action type with a `createAction` action creator:

```js
import { createAction, onAction } from 'redux-preboiled'

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

const subReducer = onAction(
  multiply,
  (state, action) => state * action.payload
)

subReducer(2, multiply(4))
// => 8

subReducer(2, increment())
// => 2
```

## See Also

* [Reducers](/guides/reducers.md) guide
* [`createAction`](/api/createaction.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redux-preboiled.js.org/api/onaction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.