绑定并转换action的方法。

先看源码：

  1. function bindActionCreator(actionCreator, dispatch) {
  2.   return function() {
  3.     return dispatch(actionCreator.apply(this, arguments))
  4.   }
  5. }
  8. export default function bindActionCreators(actionCreators, dispatch) {
  9.   if (typeof actionCreators === 'function') {
  10.     return bindActionCreator(actionCreators, dispatch)
  11.   }
  13.   const boundActionCreators = {}
  14.   for (const key in actionCreators) {
  15.     const actionCreator = actionCreators[key]
  16.     if (typeof actionCreator === 'function') {
  17.       boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
  18.     }
  19.   }
  20.   return boundActionCreators
  21. }

整个源码并不多，看起来就是遍历actions并绑定，再将dispatch传入。

为了更方便理解，我们需要结合DEMO深入理解：

  1. // userActions.js
  2. export const f1 = function (id) {
  3.   return function (dispatch: any, getState: any) {
  4.         console.log('f1');
  5.     request({ id });
  6.     return getState();
  7.   };
  8. };
  10. export const f2 = function (id) {
  11.   return function (dispatch: any, getState: any) {
  12.         console.log('f1');
  13.     request({ id });
  14.     return getState();
  15.   };
  16. };

引入：

  1. // connect.js
  2. import * as usersActions from './userActions'
  4. function defaultMapStateToProps(state) {
  5.   return {
  6.     $user: state.user,
  7.   };
  8. }
  10. function defaultMapDispatchToProps(dispatch: any) {
  11.   return {
  12.     actions: {
  13.       $user: bindActionCreators(Object.assign({}, usersActions), dispatch),
  14.     }
  15.   }
  16. }
  18. export default function createContainer() {
  19.   const curMapStateToProps: any =  defaultMapStateToProps;
  20.   const curMapDispatchToProps: any = defaultMapDispatchToProps;
  21.   return function connectAppScreen(constructor) {
  22.     return connect(curMapStateToProps, curMapDispatchToProps)(constructor);
  23.   }
  24. }

在react组件调用action：

  1. @connect
  2. class App extends React.Component {
  3.     fetch(){
  4.       this.props.$actions.$user.f1('id1')
  5.   }
  6. }

最小化代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11. <script>
  13. function bindActionCreator(actionCreator, dispatch) {
  14.   return function() {
  15.     return dispatch(actionCreator.apply(this, arguments))
  16.   }
  17. }
  19. function bindActionCreators(actionCreators, dispatch) {
  20.   if (typeof actionCreators === 'function') {
  21.     return bindActionCreator(actionCreators, dispatch)
  22.   }
  24.   const boundActionCreators = {}
  25.   for (const key in actionCreators) {
  26.     const actionCreator = actionCreators[key]
  27.     if (typeof actionCreator === 'function') {
  28.       boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
  29.     }
  30.   }
  31.   return boundActionCreators
  32. }
  34. const dispatch = function(action) {
  35.   console.log('dispatch.action', action);
  36.   return action;
  37. }
  39. const actions = {
  40.   f1: (params) => {
  41.     return (dispatch) => {
  42.       console.log('f1.params', params)
  43.       dispatch({type: 'F1', payload: 'f1'})
  44.     }
  45.   },
  46.   f2: (params) => {
  47.     return (dispatch) => {
  48.       console.log('f2.params', params)
  49.       dispatch({type: 'F2', payload: 'f2'})
  50.     }
  51.   } 
  52. }
  54. const a1 = bindActionCreators(actions, func => func(dispatch));
  55. console.log('a1', a1)
  57. a1.f1('xx f1');
  58. a1.f2('bb f2');
  60. </script>
  61. </body>
  62. </html>