redux-actions源码解读

一.什么是redux-actions

　　　redux-actions是一个简化action和reducer创建的一个封装库,里面有5个js文件,

　　　createAction.js

　　　handleAction.js

　　　handleActions.js

　　　index.js

　　　ownKeys.js

二.怎么使用?下面将从源码一一解释每个文件的的用处

　　1.createAction.js

　　　　从名字就可以看出,这是用来创建action的.其源码如下:

　　　　　　

 /**
  * 参数不是function调用此函数
  */
 function identity(t) {
   return t;
 }
 
 /**
  * 创建action
  * @param type  action的类型
  * @param actionCreator 需要创建的action,函数
  * @param metaCreator   action的属性
  * @returns {Function}
  */
 export default function createAction(type, actionCreator, metaCreator) {
     /**
     * finalActionCreator最终创建的action,
     * 判断传进来的参数是不是function,true返回这个函数,false调用identity函数
     */
   const finalActionCreator = typeof actionCreator === 'function'
     ? actionCreator
     : identity;
   /**
    * 返回一个匿名函数
    */
   return (...args) => {
     /**
      *创建的action,只有两个属性
      */
     const action = {
       type,
       payload: finalActionCreator(...args)
     };
     /**
      * 如果给匿名函数传递参数的长度为1个,或者第一个参数元素的类型为Error,那么这么action的error属性为true
      */
     if (args.length === 1 && args[0] instanceof Error) {
       // Handle FSA errors where the payload is an Error object. Set error.
       action.error = true;
     }
     /**
      * 传递到action里面的函数
      */
     if (typeof metaCreator === 'function') {
       action.meta = metaCreator(...args);
     }
 
     return action;
   };
 }

　　2.handleAction.js

　　　　操作action,源码如下:

　　　　

 import { isError } from 'flux-standard-action';
 /**
  * 判断是不是function
  */
 function isFunction(val) {
   return typeof val === 'function';
 }
 /**
  * 处理action
  * @param type action类型
  * @param 所有的reducers
  * @returns {Function}
  */
 export default function handleAction(type, reducers) {
   return (state, action) => {
     // If action type does not match, return previous state
     if (action.type !== type) return state;
 
     const handlerKey = isError(action) ? 'throw' : 'next';
 
     // If function is passed instead of map, use as reducer
     if (isFunction(reducers)) {
       reducers.next = reducers.throw = reducers;
     }
 
     // Otherwise, assume an action map was passed
     const reducer = reducers[handlerKey];
 
     return isFunction(reducer)
       ? reducer(state, action)
       : state;
   };
 }

　　　　reduce-reducers源码:

 export default function reduceReducers(...reducers) {
   return (previous, current) =>
     reducers.reduce(
       (p, r) => r(p, current),
       previous
     );
 }

　　3.handleActions.js　

　　　　将所有的action集中在一起处理

　　　　

 import handleAction from './handleAction';
 import ownKeys from './ownKeys';
 import reduceReducers from 'reduce-reducers';
 
 /**
  *
  * @param handlers 所有的action
  * @param defaultState 初始的state
  * @returns {Function}  返回reducer
  */
 export default function handleActions(handlers, defaultState) {
   const reducers = ownKeys(handlers).map(type => {
     return handleAction(type, handlers[type]);
   });
   /**
    * 处理过后的reduce
    */
   const reducer = reduceReducers(...reducers)
 
   return typeof defaultState !== 'undefined'
     ? (state = defaultState, action) => reducer(state, action)
     : reducer;
 }

　　4.ownKeys.js

　　　　用于判断对象属性的工具

　　　

 export default function ownKeys(object) {
   /**
    * Reflect.ownKeys类似于Object.keys(),返回对象中可枚举的属性
    */
   if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {
     return Reflect.ownKeys(object);
   }
   /**
    * 返回对象自己(非原型继承的属性)的属性名称，包括函数。
    * Object.keys只适用于可枚举的属性，而Object.getOwnPropertyNames返回对象自己的全部属性名称。
    */
   let keys = Object.getOwnPropertyNames(object);
   /**
    * getOwnPropertySymbols
    * 返回Symbol类型的属性
    */
   if (typeof Object.getOwnPropertySymbols === 'function') {
     keys = keys.concat(Object.getOwnPropertySymbols(object));
   }
 
   return keys;
 }

　　5.index.js

　　　　输出所有的函数

　　

 import createAction from './createAction';
 import handleAction from './handleAction';
 import handleActions from './handleActions';
 
 export {
   createAction,
   handleAction,
   handleActions
 };