Redux源码解析系列(五)-- bindActionCreator

IMWeb前端团队

发布于 2018-01-08 17:58:20

7840

发布于 2018-01-08 17:58:20

文章被收录于专栏：IMWeb前端团队

本文作者：IMWeb 黄qiong 原文出处：IMWeb社区 未经同意，禁止转载

bindActionCreator 的作用其实就是用来将一个对象，它的value是action creators转成一个同样ke但是值变成将action creator包裹在dispatch里的函数。

也就是说,假设下面的actionCreator.js 我们import进来这个对象

export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

export function removeTodo(id) {
  return {
    type: 'REMOVE_TODO',
    id
  }
}

得到的对象为

{
   addTodo : text => 
    { 
      type: 'ADD_TODO',
      text
    },
   removeTodo : id => {
      type: 'REMOVE_TODO',
      id
    }
}

经过bindActionCreator就会变成

{
   addTodo : text => dispatch(addTodo('text'));
   removeTodo : id => dispatch(removeTodo('id'));
}

相当于会dispatch这个action。

bindActionCreator

参数：

1、actionCretors 可以是一个对象，也可以是一个单个函数

2、dispatch函数

返回：单个函数，或者是一个对象。

传入一个function

如果只是传入一个function，返回的也是一个function

例如：

const toggleTodo = (id) => {
    return {
        type: 'TOGGLE_TODO',
        id
    };
};

export { toggleTodo };
let boundActionCreators = bindActionCreators(toggleTodo, dispatch);

//此时boundActionCreators  = (id) => dispatch(toggleTodo(id));

所以bindActionCreator实现比较简单，它的思路就是

1、判断传入第一个的参数是否是object，如果是函数，就直接返回一个包裹dispatch的函数

2、如果是object，就根据相应的key，生成包裹dispatch的函数即可

function bindActionCreator(actionCreator, dispatch) {
  return function() { return dispatch(actionCreator.bind(undefined, arguments))}
}

export default function bindActionCreators(actionCreators, dispatch) {
   if(typeof actionCreators === 'function') {
     return bindActionCreator(actionCreators, dispatch)
   }
   if (typeof actionCreators !== 'object' || actionCreators === null) {
        throw new Error(
          `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? 'null' : typeof actionCreators}. ` +
          `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
        )
      }
   const keys = Object.keys(actionCreators)
   const boundActionCreators = {}
   keys.forEach((key) => {
     boundActionCreators[key] = bindActionCreator(actionCreators[key], dispatch)
   })
   return boundActionCreators
}

总结，bindActionCreator 的作用就是返回包裹dispatch的函数可以直接使用。

一般我们会用来mapDispatchToProps里。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度