redux-act-reducer

• Simple, concise code
• Support for creating asynchronous action and reducer with simple code
• When asynchronous, the same 'type' is distinguished by 'subType'
• Works with redux-thunk

Note: since version 2, createReducer no longer uses Object.assign to automatically merge state. If you want to continue to use, please set the createReducer option autoAssign to true

Install

npm install redux-act-reducer --save

Example

• createAction
• dispatch
• createReducer

Usage

createAction(type, [...args])

Action creator

1import { createAction } from 'redux-act-reducer';
2
3export const SHOW_HELLO = 'SHOW_HELLO';
4export const showHello = createAction(SHOW_HELLO, 'info');
5
6export const SHOW_HI = 'SHOW_HI';
7export const showHi = createAction(SHOW_HI, 'arg1', 'arg2')

1dispatch(showHello('Hello World!'));
2// dispatch action: { type: 'SHOW_HELLO', info: 'Hello World!' }
3
4dispatch(showHi('one', 'two'));
5// dispatch action: { type: 'SHOW_HI', arg1: 'one', arg2: 'two' }

Or

1import { createAction } from 'redux-act-reducer';
2
3export const SHOW_HELLO = 'SHOW_HELLO';
4export const showHello = createAction(SHOW_HELLO);

1dispatch(showHello({info: 'Hello World!'}));
2
3// dispatch action: { type: 'SHOW_HELLO', info: 'Hello World!' }

createReducer(handlers, defaultState, options)

Generating Reducers

• handlers: reducer function object
• defaultState: default state
• options:
  • autoAssign bool, default false. If true will automatically merge returned objects using Object.assign

1import { createReducer } from 'redux-act-reducer';
2import { SHOW_HELLO, SHOW_HI } from '../your/actions/path';
3
4const defaultState = {
5  info: ''
6};
7
8const hello = createReducer({
9  [SHOW_HELLO](state, action) {
10    return Object.assign({}, state, { info: action.info });
11  },
12  [SHOW_HI](state, action) {
13    return Object.assign({}, state, {
14      arg1: action.arg1,
15      arg2: action.arg2
16    });
17  },
18
19  ......
20
21}, defaultState);
22
23export default hello;
24

1dispatch(showHello('Hello World!'));
2// state: { hello: { info: 'Hello World!' }, ... }

If autoAssign option is true

1import { createReducer } from 'redux-act-reducer';
2import { SHOW_HELLO } from '../your/actions/path';
3
4const defaultState = {
5  info: ''
6};
7
8const hello = createReducer({
9  [SHOW_HELLO](state, action) {
10    return {
11      info: action.info
12    };
13  },
14
15  ......
16
17}, defaultState, { autoAssign: true });
18
19export default hello;
20

1dispatch(showHello('Hello World!'));
2// state: { hello: { info: 'Hello World!' }, ... }

Reducer function

1return {
2  info: 'hi'
3};

Will automatically assign to a new state object

1return Object.assign({}, state, {
2  info: 'hi'
3});

Use Immutable.js

autoAssign option must be false. (default is false)

1import { fromJS } from 'immutable';
2import { createReducer } from 'redux-act-reducer';
3import { SHOW_HELLO } from '../your/actions/path';
4
5const defaultState = fromJS({
6  info: ''
7});
8
9const hello = createReducer({
10  [SHOW_HELLO](state, action) {
11    return state.set('info', action.info);
12  },
13  
14  ......
15  
16}, defaultState);
17
18export default hello;
19

Async

createActionAsync(type, api, options)

works with redux-thunk

• type action type
• api a module that sends requests to a server (Please return a promise)
• options (string or object. if it is a string, it is async name)
  • name async name (default: same as type)
  • isCreateRequest whether to create and dispatch REQUEST action automatically (default: true)
  • isCreateSuccess whether to create and dispatch SUCCESS action automatically (default: true)
  • isCreateFailure whether to create and dispatch FAILURE action automatically (default: true)
  • onRequest function after REQUEST: onRequest(dispatch, getState)
  • onSuccess function after SUCCESS: onSuccess(dispatch, getState, res)
  • onFailure function after FAILURE: onFailure(dispatch, getState, err)

1import { createActionAsync } from 'redux-act-reducer';
2
3export const SHOW_HELLO_ASYNC = 'SHOW_HELLO_ASYNC';
4export const showHelloAsync = createActionAsync(SHOW_HELLO_ASYNC, api, 'asyncName');
5// api is a module that sends requests to a server.
6// createActionAsync will create 3 action with subType: REQUEST, SUCCESS, FAILURE
7// 'hello' is Asynchronous name

1dispatch(showHelloAsync(arg1, arg2));
2// will dispatch:
3// dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'REQUEST', ... });
4// if success: dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'SUCCESS', res, ... });
5// if error: dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'FAILURE', err, ... });
6// args will pass to api: api(arg1, arg2)

1export const switchFlag = createActionAsync(SWITCH_FLAG, switchFlagApi, {
2  name: 'switchFlag',
3  onRequest(dispatch, getState) {
4    dispatch(shouldUpdate(true));
5  },
6  onSuccess(dispatch, getState, res) {
7    dispatch(shouldUpdate(false));
8  }
9});

async createReducer with autoAssign option is true

1import { createReducer } from 'redux-act-reducer';
2import { SHOW_HELLO_ASYNC } from '../your/actions/path';
3
4const defaultState = {};
5const hello = createReducer({
6  [SHOW_HELLO_ASYNC](state, action) {
7    return {
8      res: action.res
9    };
10  },
11  // Default is SUCCESS code.
12  // Will automatically generate REQUEST and FAILURE code, so that the code is simple.
13  ......
14
15}, defaultState, { autoAssign: true });
16
17export default hello;

Same as

1import { createReducer } from 'redux-act-reducer';
2import { SHOW_HELLO_ASYNC } from '../your/actions/path';
3
4const defaultState = {};
5const hello = createReducer({
6  [SHOW_HELLO_ASYNC](state, action) {
7    return {
8      'SUCCESS'() {
9        return {
10          res: action.res
11        };
12      }
13    };
14  },
15
16  ......
17
18}, defaultState, { autoAssign: true });
19
20export default hello;

Same as

1import { createReducer } from 'redux-act-reducer';
2import { SHOW_HELLO_ASYNC } from '../your/actions/path';
3
4const defaultState = {};
5const hello = createReducer({
6  [SHOW_HELLO_ASYNC](state, action) {
7    return {
8      'REQUEST'() {
9        return {
10          asyncStatus: {
11            hello: {
12              isFetching: true,
13              err: undefined,
14            }
15          }
16        };
17      },
18      'SUCCESS'() {
19        return {
20          asyncStatus: {
21            hello: {
22              isFetching: false,
23              err: undefined,
24            }
25          },
26          res: action.res
27        };
28      },
29      'FAILURE'() {
30        return {
31          asyncStatus: {
32            hello: {
33              isFetching: false,
34              err: action.err,
35            }
36          }
37        };
38      }
39    };
40  },
41
42  ......
43
44}, defaultState, { autoAssign: true });
45
46export default hello;

When the Reducer does not have the REQUEST and FAILURE functions, createReducer will automatically generate the reducer and update the state

The generated state looks like the following:

1state: {
2  hello: {
3    asyncStatus: {
4      asyncName: {
5        isFetching: true,
6        err: undefined,
7      }
8    },
9    ...
10  },
11
12  ...
13}

If there is no name, then use type as the name

1state: {
2  hello: {
3    asyncStatus: {
4      SHOW_HELLO_ASYNC: {
5        isFetching: true,
6        err: undefined,
7      }
8    },
9    ...
10  }
11
12  ...
13}

License

MIT