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
};