handleAction(s)

• Methods

  • handleAction

    • handleAction(type, reducer, defaultState)

    • handleAction(type, reducerMap, defaultState)

  • handleActions

    • handleActions(reducerMap, defaultState[, options])

Methods

handleAction

handleAction(
  type,
  reducer | reducerMap = Identity,
  defaultState,
)

Wraps a reducer so that it only handles Flux Standard Actions of a certain type.

import { handleAction } from 'redux-actions';

handleAction(type, reducer, defaultState)

If a reducer function is passed, it is used to handle both normal actions and failed actions. (A failed action is analogous to a rejected promise.) You can use this form if you know a certain type of action will never fail, like the increment example above.

If the reducer argument (reducer) is undefined, then the identity function is used.

The third parameter defaultState is required, and is used when undefined is passed to the reducer.

EXAMPLE

handleAction(
  'APP/COUNTER/INCREMENT',
  (state, action) => ({
    counter: state.counter + action.payload.amount
  }),
  defaultState
);

handleAction(type, reducerMap, defaultState)

Otherwise, you can specify separate reducers for next() and throw() using the reducerMap form. This API is inspired by the ES6 generator interface.

If the reducer argument (reducerMap) is undefined, then the identity function is used.

EXAMPLE

handleAction('FETCH_DATA', {
  next(state, action) {...},
  throw(state, action) {...},
}, defaultState);

If either next() or throw() are undefined or null, then the identity function is used for that reducer.

handleActions

handleActions(reducerMap, defaultState);

Creates multiple reducers using handleAction() and combines them into a single reducer that handles multiple actions. Accepts a map where the keys are passed as the first parameter to handleAction() (the action type), and the values are passed as the second parameter (either a reducer or reducer map). The map must not be empty.

If reducerMap has a recursive structure, its leaves are used as reducers, and the action type for each leaf is the path to that leaf. If a node's only children are next() and throw(), the node will be treated as a reducer. If the leaf is undefined or null, the identity function is used as the reducer. Otherwise, the leaf should be the reducer function.

import { handleActions } from 'redux-actions';

handleActions(reducerMap, defaultState[, options])

The second parameter defaultState is required, and is used when undefined is passed to the reducer.

(Internally, handleActions() works by applying multiple reducers in sequence using reduce-reducers.)

EXAMPLE

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload
    }),

    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload
    })
  },
  { counter: 0 }
);

Or using a JavaScript Map type:

const reducer = handleActions(
  new Map([
    [
      INCREMENT,
      (state, action) => ({
        counter: state.counter + action.payload
      })
    ],

    [
      DECREMENT,
      (state, action) => ({
        counter: state.counter - action.payload
      })
    ]
  ]),
  { counter: 0 }
);

You can also use an action function as the key to a reduce function instead of using a string const:

const increment = createAction(INCREMENT);
const decrement = createAction(DECREMENT);

const reducer = handleActions(
  new Map([
    [
      increment,
      (state, action) => ({
        counter: state.counter + action.payload
      })
    ],

    [
      decrement,
      (state, action) => ({
        counter: state.counter - action.payload
      })
    ]
  ]),
  { counter: 0 }
);

handleActions(actionMap[, defaultState], options)

You can prefix each action type by passing a configuration object as the last argument of handleActions.

EXAMPLE

const options = {
  prefix: 'counter', // String used to prefix each type
  namespace: '--' // Separator between prefix and type.  Default: `/`
}

createActions({ ... }, 'INCREMENT', options)

handleActions({ ... }, defaultState, options)