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() 方法用于获取一个对象的原型属性指向的是哪个对象.

举个												

redux源码解析(深度解析redux+异步demo)的更多相关文章

  1. 深入源码,深度解析Java 线程池的实现原理

    java 系统的运行归根到底是程序的运行,程序的运行归根到底是代码的执行,代码的执行归根到底是虚拟机的执行,虚拟机的执行其实就是操作系统的线程在执行,并且会占用一定的系统资源,如CPU.内存.磁盘.网 ...

  2. Redux源码分析之bindActionCreators

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  3. Redux源码分析之combineReducers

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  4. 手把手教你撸一套Redux(Redux源码解读)

    Redux 版本:3.7.2 Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 说白了Redux就是一个数据存储工具,所以数据基础模型有get方法,set方法以及数据改变后通知 ...

  5. Redux源码分析之applyMiddleware

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  6. Redux源码分析之createStore

    接着前面的,我们继续,打开createStore.js, 直接看最后, createStore返回的就是一个带着5个方法的对象. return { dispatch, subscribe, getSt ...

  7. Redux源码分析之基本概念

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  8. Redux源码分析之compose

    Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...

  9. Flink 源码解析 —— 深度解析 Flink 是如何管理好内存的?

    前言 如今,许多用于分析大型数据集的开源系统都是用 Java 或者是基于 JVM 的编程语言实现的.最着名的例子是 Apache Hadoop,还有较新的框架,如 Apache Spark.Apach ...

随机推荐

  1. NativeWindow_01_CreateWindow(Ex)_VC6

    1. #include <windows.h> LRESULT CALLBACK ProcWindow(HWND hwnd, UINT uMsg, WPARAM wParam, LPARA ...

  2. flutter安装与配置 v1.2.1版本

    1---- 上面是下载地址https://flutter.dev/docs/development/tools/sdk/archive#windows 2---- 下载后,解压安装到C盘 3--- 测 ...

  3. vue中兄弟组件间通讯

    vue2.0中兄弟组件间的通讯是通过eventBus(事件发布订阅)实现的. eventBus.js import Vue from 'vue' const eventBus = new Vue() ...

  4. POI 导入导出时异常[java.io.IOException: Broken pipe]

    使用用POI导出文件时抛出异常java.io.IOException: Broken pipe ERROR: 'java.io.IOException: Broken pipe' org.apache ...

  5. 全排列问题Ⅰ(Java实现)

    给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1 ...

  6. Codeforces 1053 C - Putting Boxes Together

    C - Putting Boxes Together 思路: 求带权中位数 用树状数组维护修改 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) ...

  7. (转)c#反射

    1. 什么是反射2. 命名空间与装配件的关系3. 运行期得到类型信息有什么用4. 如何使用反射获取类型5. 如何根据类型来动态创建对象6. 如何获取方法以及动态调用方法7. 动态创建委托 1.什么是反 ...

  8. windows10 64bit 下的tensorflow 安装及demo

    目前流行的深度学习库有Caffe,Keras,Theano,本文采用谷歌开源的曾用来制作AlphaGo的深度学习系统Tensorflow. 1:安装Tensorflow 最早TensorFlow只支持 ...

  9. HTML第十四章总结 HTML forms

    第十四章主要讲了 html forms,通过 forms,我们可以得到 customers' feedback,使得网页能够 interactive,本章的内容分为三个部分: forms 的 elem ...

  10. InitializingBean和DisposableBean

    InitializingBean 记住一点:InitializingBean接口为bean提供了初始化方法的方式,它只包括afterPropertiesSet方法,凡是继承该接口的子类,在初始化bea ...