ActionReducer

A simple ActionCreator and Reducer library that provides type-safe for TypeScript.
Used for React (useReducer), Redux, etc.

Installation

npm install action-reducer

Usage

Basic

1import ActionReducer from 'action-reducer'
2// OR
3// const ActionReducer = require('action-reducer').default
4
5const initState = { flag: false }
6const { createAction, reducer } = ActionReducer(initState)
7
8export const toggleFlag = createAction(
9  'TOGGLE_FLAG', // action type (Optional arg)
10  (state) =>     // Reducer for this action
11    ({ ...state, flag: !state.flag })
12)
13
14export const setFlag = createAction(
15  'SET_FLAG',
16  (state, arg1, /* arg2, arg3... */) =>
17    ({ ...state, flag: arg1 })
18)
19
20// reducer can be used as Redux Reducer!!
21export default reducer
22
23setFlag.type  // 'SET_FLAG'
24setFlag(true) // { type: 'SET_FLAG', payload: [true] }
25reducer(initState, setFlag(true)) // { flag: true }

TypeScript

1const { createAction, reducer } = ActionReducer(initState)
2// OR
3// const { createAction, reducer } = ActionReducer<State>()
4
5// just specify the type in the argument
6export const setFlag = createAction(
7  'SET_FLAG',
8  (state, arg1: boolean) =>
9    ({ ...state, flag: arg1 })
10)

Connect Redux

You can use it the same way as before.

1// components/some-component.js
2import { setFlag, toggleFlag } from '../modules/flag'
3
4dispatch(setFlag(true))

1// modules/index.js
2import { combineReducers } from 'redux'
3import flag from './flag'
4
5export default combineReducers({
6  flag: flag,
7})

with Prefix

1const { createAction } = ActionReducer(initState, 'PREFIX/')
2
3// with prefix
4const fooAction = createAction('foo', fooFn)
5fooAction.type  // PREFIX/foo
6fooAction() // { type: 'PREFIX/foo', payload: [] }
7
8// The prefix is ignored when specifying an object
9const barAction = createAction({ type: 'bar' }, barFn)
10barAction.type // bar
11barAction() // { type: 'bar', payload: [] }

API

ActionReducer<State>(initState, prefix?)

• initState? (State): Redux initial State. (Optional arg for React useReducer)
• prefix? (string): Prefix for action type. (Optional arg)
• return ({ createAction: CreateAction, reducer: Reducer }): CreateAction and Reducer.

CreateAction<Payload>(type?, mutation)

• type? (string | symbol | { type: string }): Action type. (Optional arg)
• mutation ((state: State, ...args: Payload) => State): Mutation for this action.
• return (AcitonCreator): Action creator function.

AcitonCreator(...args: Payload)

• ...args (Payload): Action args.
• return ({ type: string | symbol, payload: Payload }): Action object.

Reducer(state: State, action: any)

• state (State): Current state.
• action (any): Action object.
• return (State): New state.