redux 源码阅读

目录

• 【目录结构】
• 【utils】
  • actionTypes.js
  • isPlainObject.js
  • warning.js
• 【逻辑代码】
  • index.js
  • createStore.js
  • compose.js
  • applyMiddleware.js
  • bindActionCreators.js
  • combineReducers.js
• 结束：

【目录结构】


Redux 源码可以在任意项目中的 node_modules 文件夹下的 redux 中找到。我们阅读学习中主要关注 src 即可。

src 下主要分成两个部分， 一部分是 utils 工具库， 一部分是 redux 逻辑代码。

【utils】

Redux 自定义的工具库

下属对应三个文件

• actionTypes.js
• isPlainObject.js
• warning.js

actionTypes.js

源码如下：

const randomString = () =>
  Math.random()
    .toString(36)
    .substring(7)
    .split('')
    .join('.')

const ActionTypes = {
  INIT: `@@redux/INIT${randomString()}`,
  REPLACE: `@@redux/REPLACE${randomString()}`,
  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
}

export default ActionTypes

这个文件主要是用来对外暴露三个 action 类型，比较好理解。

其中的 randomString 方法用来获取指定长度的随机字符串， 这里有个很多同学都会忽略掉的知识点， Number.prototype.toString 方法 接受一个可选参数 radix ，该参数代表数字的基数， 也就是我们常数的二进制、八进制等， 默认为 10， 范围在 2~36之间。

isPlainObject.js

源码如下：

export default function isPlainObject(obj) {

  if (typeof obj !== 'object' || obj === null) return false

  let proto = obj

  while (Object.getPrototypeOf(proto) !== null) {
    proto = Object.getPrototypeOf(proto)
  }

  return Object.getPrototypeOf(obj) === proto
}

这个文件对外暴露一个用来判断是否为简单对象的方法。

简单对象

凡不是new Object()或者字面量的方式构建出来的对象都不是简单对象

就是该对象的 __proto__ 等于 Object.prototype

举