redux-actions源碼解讀

一.什麼是redux-actions

　　　redux-actions是一個簡化action和reducer建立的一個封裝庫,裏面有5個js文件,

　　　createAction.js

　　　handleAction.js

　　　handleActions.js

　　　index.js

　　　ownKeys.js

二.怎麼使用?下面將從源碼一一解釋每一個文件的的用處

　　1.createAction.js

　　　　從名字就能夠看出,這是用來建立action的.其源碼以下:

　　　　　　

 1 /**
 2  * 參數不是function調用此函數
 3  */
 4 function identity(t) {
 5   return t;
 6 }
 7 
 8 /**
 9  * 建立action
10  * @param type  action的類型
11  * @param actionCreator 須要建立的action,函數
12  * @param metaCreator   action的屬性
13  * @returns {Function}
14  */
15 export default function createAction(type, actionCreator, metaCreator) {
16     /**
17     * finalActionCreator最終建立的action,
18     * 判斷傳進來的參數是否是function,true返回這個函數,false調用identity函數
19     */
20   const finalActionCreator = typeof actionCreator === 'function'
21     ? actionCreator
22     : identity;
23   /**
24    * 返回一個匿名函數
25    */
26   return (...args) => {
27     /**
28      *建立的action,只有兩個屬性
29      */
30     const action = {
31       type,
32       payload: finalActionCreator(...args)
33     };
34     /**
35      * 若是給匿名函數傳遞參數的長度爲1個,或者第一個參數元素的類型爲Error,那麼這麼action的error屬性爲true
36      */
37     if (args.length === 1 && args[0] instanceof Error) {
38       // Handle FSA errors where the payload is an Error object. Set error.
39       action.error = true;
40     }
41     /**
42      * 傳遞到action裏面的函數
43      */
44     if (typeof metaCreator === 'function') {
45       action.meta = metaCreator(...args);
46     }
47 
48     return action;
49   };
50 }

View Code

 

 

 　　2.handleAction.js

　　　　操做action,源碼以下:

　　　　

 1 import { isError } from 'flux-standard-action';
 2 /**
 3  * 判斷是否是function
 4  */
 5 function isFunction(val) {
 6   return typeof val === 'function';
 7 }
 8 /**
 9  * 處理action
10  * @param type action類型
11  * @param 全部的reducers
12  * @returns {Function}
13  */
14 export default function handleAction(type, reducers) {
15   return (state, action) => {
16     // If action type does not match, return previous state
17     if (action.type !== type) return state;
18 
19     const handlerKey = isError(action) ? 'throw' : 'next';
20 
21     // If function is passed instead of map, use as reducer
22     if (isFunction(reducers)) {
23       reducers.next = reducers.throw = reducers;
24     }
25 
26     // Otherwise, assume an action map was passed
27     const reducer = reducers[handlerKey];
28 
29     return isFunction(reducer)
30       ? reducer(state, action)
31       : state;
32   };
33 }

View Code

 

　　　　reduce-reducers源碼:

1 export default function reduceReducers(...reducers) {
2   return (previous, current) =>
3     reducers.reduce(
4       (p, r) => r(p, current),
5       previous
6     );
7 }

View Code

　　3.handleActions.js　

　　　　將全部的action集中在一塊兒處理

　　　　

 1 import handleAction from './handleAction';
 2 import ownKeys from './ownKeys';
 3 import reduceReducers from 'reduce-reducers';
 4 
 5 /**
 6  *
 7  * @param handlers 全部的action
 8  * @param defaultState 初始的state
 9  * @returns {Function}  返回reducer
10  */
11 export default function handleActions(handlers, defaultState) {
12   const reducers = ownKeys(handlers).map(type => {
13     return handleAction(type, handlers[type]);
14   });
15   /**
16    * 處理事後的reduce
17    */
18   const reducer = reduceReducers(...reducers)
19 
20   return typeof defaultState !== 'undefined'
21     ? (state = defaultState, action) => reducer(state, action)
22     : reducer;
23 }

View Code

 

　　4.ownKeys.js

　　　　用於判斷對象屬性的工具

　　　

 1 export default function ownKeys(object) {
 2   /**
 3    * Reflect.ownKeys相似於Object.keys(),返回對象中可枚舉的屬性
 4    */
 5   if (typeof Reflect !== 'undefined' && typeof Reflect.ownKeys === 'function') {
 6     return Reflect.ownKeys(object);
 7   }
 8   /**
 9    * 返回對象本身(非原型繼承的屬性)的屬性名稱，包括函數。
10    * Object.keys只適用於可枚舉的屬性，而Object.getOwnPropertyNames返回對象本身的所有屬性名稱。
11    */
12   let keys = Object.getOwnPropertyNames(object);
13   /**
14    * getOwnPropertySymbols
15    * 返回Symbol類型的屬性
16    */
17   if (typeof Object.getOwnPropertySymbols === 'function') {
18     keys = keys.concat(Object.getOwnPropertySymbols(object));
19   }
20 
21   return keys;
22 }

View Code

　　5.index.js

　　　　輸出全部的函數

　　

1 import createAction from './createAction';
2 import handleAction from './handleAction';
3 import handleActions from './handleActions';
4 
5 export {
6   createAction,
7   handleAction,
8   handleActions
9 };

View Code