Package Exports

redux-act-reducer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-act-reducer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

Install

npm install redux-act-reducer --save

Example

Usage

createAction

import { createAction } from 'redux-act-reducer';

export const SHOW_HELLO = 'SHOW_HELLO';
export const showHello = createAction(SHOW_HELLO, 'info');

dispatch(showHello('Hello World!'));

// action: { type: 'SHOW_HELLO', info: 'Hello World!' }

import { createAction } from 'redux-act-reducer';

export const SHOW_HELLO = 'SHOW_HELLO';
export const showHello = createAction(SHOW_HELLO);

dispatch(showHello({info: 'Hello World!'}));

// action: { type: 'SHOW_HELLO', info: 'Hello World!' }

createReducer

import { createReducer } from 'redux-act-reducer';
import { SHOW_HELLO, SHOW_HI } from '../your/actions/path';

const defaultState = {
  info: undefined
};

const hello = createReducer({
  [SHOW_HELLO](state, action) {
    return {
      info: action.info
    };
  },
  [SHOW_HI]() {
    return {
      info: 'hi'
    };
  },

  ......

}, defaultState);

export default hello;

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

reducer function's return

return {
  info: 'hi'
};

Will automatically assign to a new state object

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

createActionAsync

works with redux-thunk

import { createActionAsync } from 'redux-act-reducer';

export const SHOW_HELLO_ASYNC = 'SHOW_HELLO_ASYNC';
export const showHelloAsync = createActionAsync(SHOW_HELLO_ASYNC, api, 'asyncName');
// api is a module that sends requests to a server.
// createActionAsync will create 3 action with subType: REQUEST, SUCCESS, FAILURE
// 'hello' is Asynchronous name

dispatch(showHelloAsync(arg1, arg2));
// will dispatch:
// dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'REQUEST', ... });
// if success: dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'SUCCESS', res, receivedAt: Date.now(), ... });
// if error: dispatch({ type: 'SHOW_HELLO_ASYNC', subType: 'FAILURE', err, ... });
// args will pass to api: api(arg1, arg2)

createActionAsync(type, api, options)

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)
onSuccess function after SUCCESS: onSuccess(dispatch, res)
onFailure function after FAILURE: onFailure(dispatch, err)

//Example
export const switchFlag = createActionAsync(SWITCH_FLAG, switchFlagApi, {
  name: 'switchFlag',
  onRequest(dispatch) {
    dispatch(shouldUpdate(true));
  },
  onSuccess(dispatch, res) {
    dispatch(shouldUpdate(false));
  }
});

createReducer

import { createReducer } from 'redux-act-reducer';
import { SHOW_HELLO_ASYNC } from '../your/actions/path';

const defaultState = {};
const hello = createReducer({
  [SHOW_HELLO_ASYNC](state, action) {
    return {
      res: action.res
    };
  },
  // Default is SUCCESS code.
  // Will automatically generate REQUEST and FAILURE code, so that the code is simple.
  ......

}, defaultState);

export default hello;

Same as

import { createReducer } from 'redux-act-reducer';
import { SHOW_HELLO_ASYNC } from '../your/actions/path';

const defaultState = {};
const hello = createReducer({
  [SHOW_HELLO_ASYNC](state, action) {
    return {
      'SUCCESS'() {
        return {
          res: action.res
        };
      }
    };
  },

  ......

}, defaultState);

export default hello;

Same as

import { createReducer } from 'redux-act-reducer';
import { SHOW_HELLO_ASYNC } from '../your/actions/path';

const defaultState = {};
const hello = createReducer({
  [SHOW_HELLO_ASYNC](state, action) {
    return {
      'REQUEST'() {
        return {
          asyncStatus: {
            hello: {
              isFetching: true,
              err: undefined,
            }
          }
        };
      },
      'SUCCESS'() {
        return {
          asyncStatus: {
            hello: {
              isFetching: false,
              err: undefined,
            }
          },
          res: action.res
        };
      },
      'FAILURE'() {
        return {
          asyncStatus: {
            hello: {
              isFetching: false,
              err: action.err,
            }
          }
        };
      }
    };
  },

  ......

}, defaultState);

export 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:

state: {
  hello: {
    asyncStatus: {
      asyncName: {
        isFetching: true,
        err: undefined,
      }
    },
    ...
  },

  ...
}

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

state: {
  hello: {
    asyncStatus: {
      SHOW_HELLO_ASYNC: {
        isFetching: true,
        err: undefined,
      }
    },
    ...
  }

  ...
}

License

MIT