博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
redux的bindActionCreators源码,中文翻译
阅读量:5903 次
发布时间:2019-06-19

本文共 2682 字,大约阅读时间需要 8 分钟。

bindActionCreators就是给action创建函数绑定了dispatch,可以直接以普通函数执行,而不用dispatch(actionCreator)这样写.比如下面,bindActionCreators生成一个对象,对象里面的value值是function,那么可以直接this.boundActionCreators.addTodo()执行**

clipboard.png

function bindActionCreator(actionCreator, dispatch) {  return (...args) => dispatch(actionCreator(...args))}/** * Turns an object whose values are action creators, into an object with the * same keys, but with every function wrapped into a `dispatch` call so they * may be invoked directly. This is just a convenience method, as you can call * `store.dispatch(MyActionCreators.doSomething())` yourself just fine. * * 将一个value值是action创建函数的对象变成一个具有相同key值的对象,但是每个函数都被封装到 * `dispatch`回调里面,这样它们就有可能被直接触发. 这样只是比较方便,你也可以调用 * `store.dispatch(MyActionCreators.doSomething())` *  * For convenience, you can also pass a single function as the first argument, * and get a function in return. * * 为了方便,你也可以传单个函数作为第一个参数,然后返回一个函树 *  * @param {Function|Object} actionCreators An object whose values are action * creator functions. One handy way to obtain it is to use ES6 `import * as` * syntax. You may also pass a single function. * * actionCreators 是一个value值是action创建函数的对象,一个很方便获取到它的方法就是 * 使用ES6 的`import * as `语法.也可以传单个函数 *  * @param {Function} dispatch The `dispatch` function available on your Redux * store. * * dispatch就是redux 里store的dispatch *  * @returns {Function|Object} The object mimicking the original object, but with * every action creator wrapped into the `dispatch` call. If you passed a * function as `actionCreators`, the return value will also be a single * function. *  * 返回的对象和初始的对选象很像,但每一个action创建函数都给封装到`dispatch`回调里面 * 如果你传单个函数作为`actionCreators`,那返回值也是一个单个函数 */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"?`    )    //bindActionCreators的参数应该是对象或者函数,而不是空或其他类型,    //你是不是把"import * as ActionCreators from"写成了"import ActionCreators from"?  }  const keys = Object.keys(actionCreators)  const boundActionCreators = {}  for (let i = 0; i < keys.length; i++) {    const key = keys[i]    const actionCreator = actionCreators[key]    if (typeof actionCreator === 'function') {      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch) //就是(...args) => dispatch(actionCreator(...args))    }  }  return boundActionCreators}

源码解析请参考

转载地址:http://bkupx.baihongyu.com/

你可能感兴趣的文章
Linux常用基本命令( rmdir, rm, mv )
查看>>
python 排列组合
查看>>
小程序WXML基本使用
查看>>
python 取整的两种方法
查看>>
POJ2406 Power Strings(KMP)
查看>>
JavaScript 命名空间
查看>>
java B2B2C Springcloud电子商城系统-Feign基本使用
查看>>
Qtum量子链x2018区块链新经济论坛:区块链基础设施建设发展方向
查看>>
Java反射与hook混用反射某支付的方法
查看>>
Android 安卓手机及平板虚拟键盘遮住底部导航栏问题
查看>>
前端性能优化 - Resource Hints 资源预加载
查看>>
QPM 准备优化前的思考
查看>>
JavaScript-console的使用_016
查看>>
两种方式设置iframe的高度区别
查看>>
应用后台省电秘籍——低功耗状态下应用如何正常运行?
查看>>
Iterator 和 for...of 循环
查看>>
PAT A1086
查看>>
浅析微信支付:开发前的准备
查看>>
我理解的数据结构(七)—— 堆和优先队列(Heap And PriorityQueue)
查看>>
Category 特性在 iOS 组件化中的应用与管控
查看>>