该文章仅作为个人笔记
在使用redux的时候，避免不了的就是创建各种action和actionCreator等，有没有什么更方便的方法呢，答案是redux-actions

Installation

npm install--save redux-actions 或 yarn add redux-actions

使用方法

  import { createActions, handleActions, combineActions } from 'redux-actions'
  const defaultState = { counter: 10 };
  const { increment, decrement } = createActions({
    INCREMENT: amount => ({ amount }),
    DECREMENT: amount => ({ amount: -amount })
  });
  const reducer = handleActions({
    [combineActions(increment, decrement)](state, { payload: { amount } }) {
      return { ...state, counter: state.counter + amount };
    }
  }, defaultState);
  export default reducer;

Api 构成

createAction
createAction(type)
createAction(type, payloadCreator)
createAction(type, payloadCreator, metaCreator)
createActions
createActions(actionMap)
createActions(actionMap, ...identityActions)
handleAction
handleAction(type, reducer, defaultState)
handleAction(type, reducerMap, defaultState)
handleActions
handleActions(reducerMap, defaultState)
combineActions
combineActions(...types)

redux actions的API相对数量少而且简单，下面进行逐一解释。

首先<code>createAction(s)</code>其实就是action creator的一个包装，返回值是带有payload的标准action，<code> createAction</code>如果叫做<code> createActionCreator</code>可能会更贴切一点。
<code>createAction(type)</code>，type是createAction方法的唯一必须参数，type必须是一个String或这个有toString方法的一个对象，作为action的type出现。
// Example
export const increment = createAction('INCREMENT')
export const decrement = createAction('DECREMENT')
```
 increment() // { type: 'INCREMENT' }
 decrement() // { type: 'DECREMENT' }
 increment(10) // { type: 'INCREMENT', payload: 10 }
 decrement([1, 42]) // { type: 'DECREMENT', payload: [1, 42] }
```

注：如果payload是一个Error object, redux-actions将会自动设置action.error为true
// EXAMPLE

    const noop = createAction('NOOP');

    const error = new TypeError('not a number');
    expect(noop(error)).to.deep.equal({
      type: 'NOOP',
      payload: error,
      error: true
    });

当应在<code>handleAction(s)</code>中使用时，<code>createAction</code>会直接返回他的type。
//EXAMPLE

    const noop = createAction('INCREMENT');

    // As parameter in handleAction:
    handleAction(noop, {
      next(state, action) {...},
      throw(state, action) {...}
    });

    // As object key in handleActions:
    const reducer = handleActions({
      [noop]: (state, action) => ({
        counter: state.counter + action.payload
      })
    }, { counter: 0 });

这不是什么神奇的魔法，查看createAction和HandlerAction的源码，就会发现
// createAction.js
export default function createAction(type, payloadCreator = identity, metaCreator) {
...此处省略
const typeString = type.toString();

      const actionCreator = (...args) => {
        ...此处省略
        return action;
      };
      // actionCreator实现了toString方法
      actionCreator.toString = () => typeString;

      return actionCreator;
    }

    // handleAction.js
    export default function handleAction(type, reducer = identity, defaultState) {
      // handlerAction中调用了toString
      const types = type.toString().split(ACTION_TYPE_DELIMITER);
      ...此处省略
      return (state = defaultState, action) => {
        const { type: actionType } = action;
        if (!actionType || !includes(types, actionType.toString())) {
          return state;
        }

        return (action.error === true ? throwReducer : nextReducer)(state, action);
      };
    }

创建一次性的actionCreator
// EXAMPLE

    createAction('ADD_TODO')('Use Redux');

<code>createAction(type, payloadCreator)</code>，<code>payloadCreator</code>必须是一个函数, <code>undefined</code>, 或者 <code>null</code>. 如果<code>payloadCreator</code>是<code>undefined</code> 或 <code>null</code>, 着payload会使用lodash/identity一个会把传入的第一个参数直接返回的函数。
// EXAMPLE
```
 let noop = createAction('NOOP', amount => amount);
 // same as
 noop = createAction('NOOP');

 expect(noop(42)).to.deep.equal({
   type: 'NOOP',
   payload: 42
 });
```
<code>createAction(type, payloadCreator, metaCreator)</code>，<code>metaCreator</code> 是一个可选的函数，它为<code>payload</code>创建<code>matadata</code>. 他和<code>payload creator</code>接收同样的参数,但是他的返回值会做为action中meta字段的值。如果 metaCreator 是
undefined 或 不是一个函数, action中的mata他字段会被删除。
// EXAMPLE
```
 const updateAdminUser = createAction('UPDATE_ADMIN_USER',
   (updates) => updates,
   () => ({ admin: true })
 )

 updateAdminUser({ name: 'Foo' })
 // {
 //   type: 'UPDATE_ADMIN_USER',
 //   payload: { name: 'Foo' },
 //   meta: { admin: true },
 // }
```
createActions import { createActions } from 'redux-actions';
createActions(actionMap)，actionMap 是一个对象，他可以有可递归（嵌套）的结构, action types作为key, 值 必须是 下面的一种

一个payload creator函数
一个数组，包含payload 和 meta 的creator函数，必须保证顺序。
- mata creator是必须的，如果不需要，请使用上面的选项。
一个actionMap

    // EXAMPLE
    createActions({
      ADD_TODO: todo => ({ todo }) // payload creator,
      REMOVE_TODO: [
        todo => ({ todo }), // payload creator
        (todo, warn) => ({ todo, warn }) // meta creator
      ]
    });

如果 actionMap 有一个嵌套结构,嵌套的出口是他的值是payload和mata的creator,并且他的action type会被合并，以/分割，如下例子:

    // EXAMPLE

    const actionCreators = createActions({
      APP: {
        COUNTER: {
          INCREMENT: [
            amount => ({ amount }),
            amount => ({ key: 'value', amount })
          ],
          DECREMENT: amount => ({ amount: -amount }),
          SET: undefined // given undefined, the identity function will be used
        },
        NOTIFY: [
          (username, message) => ({ message: `${username}: ${message}` }),
          (username, message) => ({ username, message })
        ]
      }
    });

    expect(actionCreators.app.counter.increment(1)).to.deep.equal({
      type: 'APP/COUNTER/INCREMENT',
      payload: { amount: 1 },
      meta: { key: 'value', amount: 1 }
    });
    expect(actionCreators.app.counter.decrement(1)).to.deep.equal({
      type: 'APP/COUNTER/DECREMENT',
      payload: { amount: -1 }
    });
    expect(actionCreators.app.counter.set(100)).to.deep.equal({
      type: 'APP/COUNTER/SET',
      payload: 100
    });
    expect(actionCreators.app.notify('yangmillstheory', 'Hello World')).to.deep.equal({
      type: 'APP/NOTIFY',
      payload: { message: 'yangmillstheory: Hello World' },
      meta: { username: 'yangmillstheory', message: 'Hello World' }
    });

注：你亦可以自定义分割type的字符串， createActions({ ... }, 'INCREMENT', { namespace: '--' })，默认是 / 。

createActions(actionMap, ...identityActions)，identityActions 是一个可选的字符串列表，他会被用来做action type; 这些 action types 会使用identity payload creator。
// EXAMPLE

 const { actionOne, actionTwo, actionThree } = createActions({
   // function form; payload creator defined inline
   ACTION_ONE: (key, value) => ({ [key]: value }),

   // array form
   ACTION_TWO: [
     (first) => [first],             // payload
     (first, second) => ({ second }) // meta
   ],

   // trailing action type string form; payload creator is the identity
 }, 'ACTION_THREE');

 expect(actionOne('key', 1)).to.deep.equal({
   type: 'ACTION_ONE',
   payload: { key: 1 }
 });

 expect(actionTwo('first', 'second')).to.deep.equal({
   type: 'ACTION_TWO',
   payload: ['first'],
   meta: { second: 'second' }
 });

 expect(actionThree(3)).to.deep.equal({
   type: 'ACTION_THREE',
   payload: 3,
 });

handleAction(s)
$ import { handleAction } from 'redux-actions';

handleAction(type, reducer, defaultState)，reducer 是一个函数, 他会同时处理normal actions 和 failed actions. (failed action 就像 promise 的 rejected.) 如果你能确定，永远不会产生 failed actions，就可以使用这个handleAction。如果reducer是undefined，会使用identity代替。第三个参数defaultState是必须的，在reducer是undefined时作为identity的参数。
// EXAMPLE
```
 handleAction('APP/COUNTER/INCREMENT', (state, action) => ({
   counter: state.counter + action.payload.amount,
 }), defaultState);
```
handleAction(type, reducerMap, defaultState)，你也可以使用包含了 next() 和 throw() 的 reducerMap ，灵感来自 ES6 generator 。如果reducerMap是undefined，会使用identity代替。如果 next() 或 throw() 任何一个是 undefined 或 null, 就会使用 identity 函数代替。
// EXAMPLE
```
 handleAction('FETCH_DATA', {
   next(state, action) {...},
   throw(state, action) {...},
 }, defaultState);
```

handleActions(reducerMap, defaultState)，handleActions 就是通过 handleAction() 创建多个 reducers，然后把他们合并为一个reducer，并且处理多个 actions。
// EXAMPLE

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

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

combineActions 合并任意数量的 action type 或 action creator，combineActions(...types)，你可以用这个方法让多个action使用一个reducer函数， types是 strings, symbols, 或 action creators 的列表。import { combineActions } from 'redux-actions';。
// EXAMPLE

const { increment, decrement } = createActions({
  INCREMENT: amount => ({ amount }),
  DECREMENT: amount => ({ amount: -amount }),
})

const reducer = handleAction(combineActions(increment, decrement), {
  next: (state, { payload: { amount } }) => ({ ...state, counter: state.counter + amount }),
  throw: state => ({ ...state, counter: 0 }),
}, { counter: 10 })

expect(reducer(undefined, increment(1)).to.deep.equal({ counter: 11 })
expect(reducer(undefined, decrement(1)).to.deep.equal({ counter: 9 })
expect(reducer(undefined, increment(new Error)).to.deep.equal({ counter: 0 })
expect(reducer(undefined, decrement(new Error)).to.deep.equal({ counter: 0 })

把 combineActions 和 handleActions 结合起来的用法如下：
// EXAMPLE

    const { increment, decrement } = createActions({
      INCREMENT: amount => ({ amount }),
      DECREMENT: amount => ({ amount: -amount })
    });

    const reducer = handleActions({
      [combineActions(increment, decrement)](state, { payload: { amount } }) {
        return { ...state, counter: state.counter + amount };
      }
    }, { counter: 10 });

    expect(reducer({ counter: 5 }, increment(5))).to.deep.equal({ counter: 10 });
    expect(reducer({ counter: 5 }, decrement(5))).to.deep.equal({ counter: 0 });
    expect(reducer({ counter: 5 }, { type: 'NOT_TYPE', payload: 1000 })).to.equal({ counter: 5 });
    expect(reducer(undefined, increment(5))).to.deep.equal({ counter: 15 });

redux actions

redux actions

Installation

使用方法

Api 构成

redux actions的API相对数量少而且简单，下面进行逐一解释。

推荐阅读更多精彩内容

友情链接更多精彩内容