redux源码分析之三：bindActionCreators.js

Dionysus_go 发布于2019-08-21 17:48 / 669人阅读

摘要：欢迎关注源码分析系列文章源码分析之一源码分析之二源码分析之三源码分析之四源码分析之五文件算是非常简单的一个文件了，该文件就实现一个目的以前这样触发一个，即，现在变成这样触发一个。目的很单纯，简化某个的调用。

欢迎关注redux源码分析系列文章：
redux源码分析之一：createStore.js
redux源码分析之二：combineReducers.js
redux源码分析之三：bindActionCreators.js
redux源码分析之四：compose.js
redux源码分析之五：applyMiddleware

bindActionCreators.js文件算是非常简单的一个文件了，该文件就实现一个目的：以前这样触发一个action，即dispatch(actionCreator(args))，现在变成这样触发一个action: boundActionCreator(args)。目的很单纯，简化某个action的调用。

实现上面那个效果，仅需一行代码，也就是源码文件中的第一个函数：

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

但是bindActionCreators.js文件对外提供的并不是上面的函数，而是另外一个，源码如下：

export default function bindActionCreators(actionCreators, dispatch) {
  //如果actionCreators是一个函数，则说明只有一个actionCreator，那直接调用bindActionCreator就行了
  if (typeof actionCreators === "function") {
    return bindActionCreator(actionCreators, dispatch)
  }

  //如果是actionCreator是对象，或者是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"?`
    )
  }

  //保持actionCreators里面原来的key，只是把key对应的value都转成了boundActionCreator
  const keys = Object.keys(actionCreators)
  const boundActionCreators = {}
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    const actionCreator = actionCreators[key]
    //只对value是函数的key进行转换，其他的都过滤掉了
    if (typeof actionCreator === "function") {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }

  //返回绑定之后的对象
  return boundActionCreators
}

这个函数做的事情也很简单，只是把actionCreators这个对象里面包含的每一个actionCreator按照原来的key的方式全部都封装了一遍而已，具体看代码喽

完整解析请参考我的github：https://github.com/abczhijia/...，如果对您有帮助，欢迎star，有任何问题也请指正。

云服务器专线服务 redux源码 Redux redux-saga react-redux

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

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

我的源码阅读之路：redux源码剖析

摘要：到月底了，小明的爸爸的单位发了工资总计块大洋，拿到工资之后第一件的事情就是上交，毫无疑问的，除非小明爸爸不要命了。当小明的爸爸收到这个通知之后，心的一块大石头也就放下来了。下面我们正式开始我们的源码阅读之旅。前言用过react的小伙伴对redux其实并不陌生，基本大多数的React应用用到它。一般大家用redux的时候基本都不会单独去使用它，而是配合react-redux一起去使用...

CloudwiseAPM 2019-08-23 12:04 评论0 收藏0
解密Redux: 从源码开始

摘要：接下来笔者就从源码中探寻是如何实现的。其实很简单，可以简单理解为一个约束了特定规则并且包括了一些特殊概念的的发布订阅器。新旧中存在的任何都将收到先前的状态。这有效地使用来自旧状态树的任何相关数据填充新状态树。 Redux是当今比较流行的状态管理库，它不依赖于任何的框架，并且配合着react-redux的使用，Redux在很多公司的React项目中起到了举足轻重的作用。接下来笔者就从源码...

remcarpediem 2019-08-23 18:40 评论0 收藏0
redux之compose

摘要：是状态管理库，与其他框架如是没有直接关系，所以可以脱离在别的环境下使用。所以一共就五个文件需要看，这五个文件也就是暴露出去的五个。所以经过处理过之后，函数就变成我们想要的格式了。总结函数在函数式编程里很常见。 redux 是状态管理库，与其他框架如 react 是没有直接关系，所以 redux 可以脱离 react 在别的环境下使用。由于没有和react 相关逻辑耦合，所以 redux...

huayeluoliuhen 2019-08-23 10:28 评论0 收藏0
解析 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