美文网首页redux学习
Redux源码(一) —— index.js

Redux源码(一) —— index.js

作者: Xiaobo2020 | 来源:发表于2019-06-24 22:31 被阅读8次

Preface

现在都9012了,还谈redux源码,是不是太晚了?回答是,但又不是,毕竟不写出来只会是更晚。

当前版本为redux@4.0.1,可能会根据版本不同存在些许差异,不过不影响。

Directory

src
|---- utils
|    |---- actionTypes.js
|    |---- isPlainObject.js
|    |---- warning.js
|---- applyMiddle.js
|---- bindActionCreator.js
|---- combineReducers.js
|---- compose.js
|---- createStore.js
|---- index.js

Analysis

utils

actionTypes.js

actionTypes.js保存了redux中的一些私有action类型,根据名称也很好理解,这里就不过多赘述了。

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

isPlainObject.js

isPlainObject.js用于判断是否是一个简单对象,这里简单的意思是指是否是单纯的object,如数组、函数等就不是,主要依靠的是Object.getPrototypeOf获取当前对象的原型,通过当前对象的直接原型和最终原型(即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
}

warning.js

warning.js用于提供一个显示警告信息的通用方法,接受一条错误信息,如果支持console.error则会先使用这条命令打印警告信息,再抛出一个Error,不过会在方法中被catch掉,没有其他操作。

export default function warning(message) {
  if (typeof console !== 'undefined' && typeof console.error === 'function') {
    console.error(message)
  }
  try {
    throw new Error(message)
  } catch (e) {}
}

index.js

index.js是redux的入口文件,主要负责判断当前是否是正确的生产环境版本,以及最主要的:向用户提供api,如基本的createStore就是在这里导出给用户的。

import createStore from './createStore'
import combineReducers from './combineReducers'
import bindActionCreators from './bindActionCreators'
import applyMiddleware from './applyMiddleware'
import compose from './compose'
import warning from './utils/warning'
import __DO_NOT_USE__ActionTypes from './utils/actionTypes'

// ... 此处省略了判断环境以及版本的警告提示

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose,
  __DO_NOT_USE__ActionTypes
}

All

index
compose
applyMiddleware
bindActionCreators
combineReducers
createStore

相关文章

  • Redux源码(一) —— index.js

    Preface 现在都9012了,还谈redux源码,是不是太晚了?回答是,但又不是,毕竟不写出来只会是更晚。 当...

  • Redux

    Redux = Reducer + Flux Redux示例 ./store/index.js ./redux/t...

  • react-router路由守卫

    安装redux和react redux index.js 用react-redux的Provider复合组件实现逐...

  • react-redux

    index.js index.redux.js App.js

  • react-redux

    1 .安装redux 2 .在store中新建index.js和reducer.js index.js reduc...

  • redux和react一起使用

    index.redux.js: App.js: index.js 项目结构

  • 使用 Redux

    简单使用 优化 App.js index.js index.redux.js 更进一步, 让 Redux 可以处理...

  • redux源码阅读——applyMiddleware

    redux源码——applyMiddleware 相关源码展示 applyMiddleware源码 compose...

  • redux 源码阅读

    redux 源码阅读 首先从 redux 的官方示例来看 redux 的作用 这样简单一看的话, redux 感觉...

  • React-todo-list 系列四

    状态组件 => Redux src——TodoList.js src——store————index.js src...

网友评论

    本文标题:Redux源码(一) —— index.js

    本文链接:https://www.haomeiwen.com/subject/lqiaqctx.html