redux源码解读－－bindActionCreators源码解析

Cc_2011 发布于2019-08-21 17:29 / 1488人阅读

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

bindActionCreators源码解析

bindActionCreators是redux提供的一个辅助方法，能够让我们以方法的形式来调用action。同时，自动dispatch对应的action。这个模块的代码十分简单，只要大家明白了Function.prototype.apply的使用，就能够很清晰的理解这个模块中的每一行代码。因为，这个模块设计到的内容有点少，所以我们就直接分析源码。

function bindActionCreator(actionCreator, dispatch) {
  // 这个函数的主要作用就是返回一个函数，当我们调用返回的这个函数的时候，就会自动的dispatch对应的action
  // 这一块其实可以更改成如下这种形式更好
  // return function(...args) {return dispatch(actionCreator.apply(this, args))}
  return function() { return dispatch(actionCreator.apply(this, arguments)) }
}

/**
    参数说明： 
        actionCreators: action create函数，可以是一个单函数，也可以是一个对象，这个对象的所有元素都是action create函数
        dispatch: store.dispatch方法
*/
export default function bindActionCreators(actionCreators, dispatch) {
  // 如果actionCreators是一个函数的话，就调用bindActionCreator方法对action create函数和dispatch进行绑定
  if (typeof actionCreators === "function") {
    return bindActionCreator(actionCreators, dispatch)
  }
  // actionCreators必须是函数或者对象中的一种，且不能是null
  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"?`
    )
  }

  // 获取所有action create函数的名字
  const keys = Object.keys(actionCreators)
  // 保存dispatch和action create函数进行绑定之后的集合
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    // 排除值不是函数的action create
    if (typeof actionCreator === "function") {
      // 进行绑定
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  // 返回绑定之后的对象
  /**
      boundActionCreators的基本形式就是
      {
      actionCreator: function() {dispatch(actionCreator.apply(this, arguments))}
      }
  */
  return boundActionCreators
}

这就是对bindActionCreators源码的一个整体解读，水平有限，欢迎拍砖。后续的源码解读和测试例子可以关注：redux源码解读仓库

GPU云服务器云服务器 redux源码源码解读 webrtc源码解读 webrtc fec源码解读

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

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

Redux 入坑进阶 - 源码解析

摘要：否则的话，认为只是一个普通的，将通过也就是进一步分发。在本组件内的应用传递给子组件源码解析期待一个作为传入，里面是如果只是传入一个，则通过返回被绑定到的函数遍历并通过分发绑定至将其声明为的属性之一接收的作为传入。原文链接：https://github.com/ecmadao/Co...转载请注明出处本文不涉及redux的使用方法，因此可能更适合使用过redux的玩家翻阅? 预热...

BothEyes1993 2019-08-20 11:09 评论0 收藏0
react-redux用法及源码解读

摘要：带有内部状态，内部可以使用。代表监听的全局，也可以说是全局的，表示该组件自身携带的方法。回答问题是通过应用的，将通过顶层组件传递到上下文环境中。所有页面集合缓存不用每次都重新加载通过绑定用法完参考文章 react-redux把组件分为UI组件和容器组件。先看图下图： showImg(https://segmentfault.com/img/bVbkVBz?w=1378&h=1194);...

Zoom 2019-08-23 14:00 评论0 收藏0
redux源码阅读－－主模块

摘要：主模块的入口模块就是。主要就做两件事引入个功能模块，并挂载至同一个对象上，对外暴露。在非环境下压缩代码，给予警告。后续的源码解读和测试例子可以关注源码解读仓库主模块 redux的入口模块就是src/index.js。这个文件的代码十分简单。主要就做两件事：引入个功能模块，并挂载至同一个对象上，对外暴露。在非production环境下压缩代码，给予警告。下面是模块的源码(只包...

testHs 2019-08-21 17:23 评论0 收藏0
不一样的redux源码解读

摘要：这里还有一个疑问点就是的嵌套，最开始也我不明白，看了源码才知道，这里返回的也是接受也就是一个所以可以正常嵌套。以作为参数，调用上一步返回的函数以为参数进行调用。 1、本文不涉及redux的使用方法，因此可能更适合使用过 redux 的同学阅读2、当前redux版本为4.0.13、更多系列文章请看 Redux作为大型React应用状态管理最常用的工具。虽然在平时的工作中很多次的用到了它...

Salamander 2019-08-26 13:34 评论0 收藏0
Redux系列源码解读

摘要：源码解读的方法就是给我们提供了灵活的创建符合标准的的方法。用于分解树，每一个对应的一个对应的子。这样在将传递给时利于分解。源码实现了这种将函数数组，通过的方法，实现层层嵌套的执行，达到中间件的实现。 Redux 源码解读 1.redux-action createAction redux-action的createAction方法就是给我们提供了灵活的创建符合FSA标准的actio...

Scliang 2019-08-20 12:08 评论0 收藏0