redux的bindActionCreators源码,中文翻译

MockingBird 发布于2019-08-23 15:39 / 2166人阅读

摘要：就是给创建函数绑定了可以直接以普通函数执行而不用这样写比如下面生成一个对象对象里面的值是那么可以直接执行将一个值是创建函数的对象变成一个具有相同值的对象但是每个函数都被封装到回调里面这样它们就有可能被直接触发这样只是比较方便你也可以调用为了

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

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
}

源码解析请参考https://segmentfault.com/a/11...

专线服务超融合服务器 redux源码中文翻译 webrtc中文翻译 bindActionCreators

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102394.html

解析 Redux 源码

摘要：也可以看我的博客解析源码解析源码是状态容器，提供可预测化的状态管理。作为全家桶的一份子，可谓说也是名声响响，在年学习想必没有多少人没听过吧。也可以看我的博客 - 解析 Redux 源码解析 Redux 源码 showImg(https://segmentfault.com/img/bVDU86?w=1254&h=825); TIP Redux 是 JavaScript 状态容器，提...

Batkid 2019-08-22 12:45 评论0 收藏0
Redux 源码拾遗

摘要：循环还没有结束，其中的某个对进行了添加或者删除，都会影响到此次循环的进行，带来不可预期的错误。首先来一段 redux 结合中间件 thunk、logger 的使用demo 了解一下应该如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

CloudwiseAPM 2019-08-02 16:11 评论0 收藏0
Redux 源码拾遗

摘要：循环还没有结束，其中的某个对进行了添加或者删除，都会影响到此次循环的进行，带来不可预期的错误。首先来一段 redux 结合中间件 thunk、logger 的使用demo 了解一下应该如何使用 const redux = require(redux) const { createStore, combineReducers, bindActionCreators, ...

zhangfaliang 2019-08-23 16:47 评论0 收藏0
redux源码解读－－bindActionCreators源码解析

摘要：源码解析是提供的一个辅助方法，能够让我们以方法的形式来调用。同时，自动对应的。这个模块的代码十分简单，只要大家明白了的使用，就能够很清晰的理解这个模块中的每一行代码。后续的源码解读和测试例子可以关注源码解读仓库 bindActionCreators源码解析 bindActionCreators是redux提供的一个辅助方法，能够让我们以方法的形式来调用action。同时，自动dispa...

Cc_2011 2019-08-21 17:29 评论0 收藏0