redux源码解析(深度解析redux)

redux源码解析

1、首先让我们看看都有哪些内容

2、让我们看看redux的流程图

　　Store：一个库，保存数据的地方，整个项目只有一个

　　　　　　创建store

　　　　　　Redux提供 creatStore 函数来生成 Store

// 引入redux
import { createStore } from 'redux';  

//创建Store 需要传递一个函数fn 这里的fn是之后会提及的reducers
const store = createStore(fn);

　　State：状态，某时刻的数据即是Store的状态

　　　　　　获取状态的方法是store.getState()

　　Action：行为，它有一个不可或缺的type属性

　　　　　　action还可以携带其他内容

　　　　　　我们可以使用action来改变State的值，

　　　　　　从而将我们需要的数据通过Action“运输”到 Store；

　　dispatch：发送action

　　　　　　dispatch(action)接受一个action对象为参数，并将它发送出去，

　　　　　　Store接受Action，接受之后需要返回一个新的State（状态）

　　Reducer：处理器　　　　

　　　　　　dispatch(action)接受一个action对象为参数，并将它发送出去，

　　　　　　Store接受Action，接受之后需要返回一个新的State（状态）

　　　　　　而创建这个新的状态的过程就是reducer

3、从isPlainObject.js开始

/**
 * @param {any} obj The object to inspect.
 * @returns {boolean} True if the argument appears to be a plain object.
 */
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
}

　　· 这个函数的核心思想在于什么呢？

　　在于判断一个值是否为一个普通的对象

　　此处的普通对象指的是直接通过字面量(let obj={})或者new Object()创建出来的对象

　　· 那么他是怎么做判断的呢？

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

　　这行代码排除掉肯定不是对象的值

注意：typeof null 的返回值为 "object". 所以只使用 typeof obj !== 'object' 不能将 null 值排除掉. 
因此应使用 typeof obj !== 'object' || obj === null 进行判断.

　　再往下就是通过原型链判断了.

　　通过 while 不断地判断 Object.getPrototypeOf(proto) !== null 并执行,

　　最终 proto 会指向 Object.prototype. 这时再判断 Object.getPrototypeOf(obj) === proto,

　　如果为 true 的话就代表 obj 是通过字面量或调用 new Object() 所创建的对象了.

　　Object.getPrototypeOf() 方法用于获取一个对象的原型属性指向的是哪个对象.

举个