资讯专栏INFORMATION COLUMN

解析 Redux 源码

Batkid / 2895人阅读

摘要:也可以看我的博客解析源码解析源码是状态容器,提供可预测化的状态管理。作为全家桶的一份子,可谓说也是名声响响,在年学习想必没有多少人没听过吧。

也可以看我的博客 - 解析 Redux 源码

解析 Redux 源码

TIP

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。

作为 React 全家桶的一份子,Redux 可谓说也是名声响响,在 2016 年学习 JavaScript 想必没有多少人没听过吧。

这里,本文不是来教大家如何使用 Redux 的 API 的,这一类的文章已经很多,对于 Redux 的介绍和学习可以点击下列链接:

官方文档

官方Github

中文文档

redux 大法好 —— 入门实例 TodoList(本人的渣渣文章)

Redux 体小精悍(只有2kB)且没有任何依赖,因此本文想通过阅读 Redux 的源码来学习 Redux 的使用以及思想。

源码结构

Redux 的源码结构很简单,我们可以直接看 src 目录下的代码:

</>复制代码

  1. .src
  2. ├── utils #工具函数
  3. ├── applyMiddleware.js
  4. ├── bindActionCreators.js
  5. ├── combineReducers.js
  6. ├── compose.js
  7. ├── createStore.js
  8. └── index.js #入口 js
index.js

这个是整个代码的入口:

</>复制代码

  1. import createStore from "./createStore"
  2. import combineReducers from "./combineReducers"
  3. import bindActionCreators from "./bindActionCreators"
  4. import applyMiddleware from "./applyMiddleware"
  5. import compose from "./compose"
  6. import warning from "./utils/warning"
  7. function isCrushed() {}
  8. if (
  9. process.env.NODE_ENV !== "production" &&
  10. typeof isCrushed.name === "string" &&
  11. isCrushed.name !== "isCrushed"
  12. ) {
  13. warning(
  14. "。。。"
  15. )
  16. }
  17. export {
  18. createStore,
  19. combineReducers,
  20. bindActionCreators,
  21. applyMiddleware,
  22. compose
  23. }

这里的 isCrushed 函数主要是为了验证在非生产环境下 Redux 是否被压缩(因为如果被压缩了那么 (isCrushed.name !== "isCrushed") 就是 true),如果被压缩会给开发者一个 warn 提示)。

然后就是暴露 createStore combineReducers bindActionCreators applyMiddleware compose 这几个接口给开发者使用,我们来逐一解析这几个 API。

createStore.js

这个是 Redux 最主要的一个 API 了,它创建一个 Redux store 来以存放应用中所有的 state,应用中应有且仅有一个 store。

</>复制代码

  1. import isPlainObject from "lodash/isPlainObject"
  2. import $$observable from "symbol-observable"
  3. // 私有 action
  4. export var ActionTypes = {
  5. INIT: "@@redux/INIT"
  6. }
  7. export default function createStore(reducer, preloadedState, enhancer) {
  8. // 判断接受的参数个数,来指定 reducer 、 preloadedState 和 enhancer
  9. if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
  10. enhancer = preloadedState
  11. preloadedState = undefined
  12. }
  13. // 如果 enhancer 存在并且适合合法的函数,那么调用 enhancer,并且终止当前函数执行
  14. if (typeof enhancer !== "undefined") {
  15. if (typeof enhancer !== "function") {
  16. throw new Error("Expected the enhancer to be a function.")
  17. }
  18. return enhancer(createStore)(reducer, preloadedState)
  19. }
  20. if (typeof reducer !== "function") {
  21. throw new Error("Expected the reducer to be a function.")
  22. }
  23. // 储存当前的 currentReducer
  24. var currentReducer = reducer
  25. // 储存当前的状态
  26. var currentState = preloadedState
  27. // 储存当前的监听函数列表
  28. var currentListeners = []
  29. // 储存下一个监听函数列表
  30. var nextListeners = currentListeners
  31. var isDispatching = false
  32. // 这个函数可以根据当前监听函数的列表生成新的下一个监听函数列表引用
  33. function ensureCanMutateNextListeners() {
  34. if (nextListeners === currentListeners) {
  35. nextListeners = currentListeners.slice()
  36. }
  37. }
  38. ... getState ...
  39. ... subscribe ...
  40. ... dispatch ...
  41. ... replaceReducer ...
  42. ... observable ...
  43. dispatch({ type: ActionTypes.INIT })
  44. return {
  45. dispatch,
  46. subscribe,
  47. getState,
  48. replaceReducer,
  49. [$$observable]: observable
  50. }
  51. }

首先定义了一个 ActionTypes 对象,它是一个 action,是一个 Redux 的私有 action,不允许外界触发,用来初始化 Store 的状态树和改变 reducers 后初始化 Store 的状态树。

createStore

然后着重来看 createStore 函数:

接受

它可以接受三个参数,reducer、preloadedState、enhancer:

reducer:是一个函数,返回下一个状态,接受两个参数:当前状态 和 触发的 action;

preloadedState:初始状态对象,可以很随意指定,比如服务端渲染的初始状态,但是如果使用 combineReducers 来生成 reducer,那必须保持状态对象的 key 和 combineReducers 中的 key 相对应;

enhancer:store 的增强器函数,可以指定为 第三方的中间件,时间旅行,持久化 等等,但是这个函数只能用 Redux 提供的 applyMiddleware 函数来生成;

根据传入参数的个数和类型,判断 reducer 、 preloadedState 、 enhancer;

返回

调用完函数它返回的接口是 dispatch subscribe getState replaceReducer[$$observable]

这也是我们开发中主要使用的几个接口。

enhancer

如果 enhancer 参数传入并且是个合法的函数,那么就是调用 enhancer 函数(传入 createStore 来给它操作),enhancer 函数返回的也是一个函数,在这里传入 reducerpreloadedState,并且返回函数调用结果,终止当前函数执行;
在 enhancer 函数里面是如何操作使用的可以看 applyMiddleware 部分;

getState

</>复制代码

  1. function getState() {
  2. return currentState
  3. }

这个函数可以获取当前的状态,createStore 中的 currentState 储存当前的状态树,这是一个闭包,这个参数会持久存在,并且所有的操作状态都是改变这个引用,getState 函数返回当前的 currentState

subscribe

</>复制代码

  1. function subscribe(listener) {
  2. // 判断传入的参数是否为函数
  3. if (typeof listener !== "function") {
  4. throw new Error("Expected listener to be a function.")
  5. }
  6. var isSubscribed = true
  7. ensureCanMutateNextListeners()
  8. nextListeners.push(listener)
  9. return function unsubscribe() {
  10. if (!isSubscribed) {
  11. return
  12. }
  13. isSubscribed = false
  14. ensureCanMutateNextListeners()
  15. var index = nextListeners.indexOf(listener)
  16. nextListeners.splice(index, 1)
  17. }
  18. }

这个函数可以给 store 的状态添加订阅监听函数,一旦调用 dispatch ,所有的监听函数就会执行;
nextListeners 就是储存当前监听函数的列表,调用 subscribe,传入一个函数作为参数,那么就会给 nextListeners 列表 push 这个函数;
同时调用 subscribe 函数会返回一个 unsubscribe 函数,用来解绑当前传入的函数,同时在 subscribe 函数定义了一个 isSubscribed 标志变量来判断当前的订阅是否已经被解绑,解绑的操作就是从 nextListeners 列表中删除当前的监听函数。

dispatch

</>复制代码

  1. function dispatch(action) {
  2. if (!isPlainObject(action)) {
  3. throw new Error(
  4. "Actions must be plain objects. " +
  5. "Use custom middleware for async actions."
  6. )
  7. }
  8. // 判断 action 是否有 type{必须} 属性
  9. if (typeof action.type === "undefined") {
  10. throw new Error(
  11. "Actions may not have an undefined "type" property. " +
  12. "Have you misspelled a constant?"
  13. )
  14. }
  15. // 如果正在 dispatch 则抛出错误
  16. if (isDispatching) {
  17. throw new Error("Reducers may not dispatch actions.")
  18. }
  19. // 对抛出 error 的兼容,但是无论如何都会继续执行 isDispatching = false 的操作
  20. try {
  21. isDispatching = true
  22. // 使用 currentReducer 来操作传入 当前状态和action,放回处理后的状态
  23. currentState = currentReducer(currentState, action)
  24. } finally {
  25. isDispatching = false
  26. }
  27. var listeners = currentListeners = nextListeners
  28. for (var i = 0; i < listeners.length; i++) {
  29. var listener = listeners[i]
  30. listener()
  31. }
  32. return action
  33. }

这个函数是用来触发状态改变的,他接受一个 action 对象作为参数,然后 reducer 根据 action 的属性 以及 当前 store 的状态来生成一个新的状态,赋予当前状态,改变 store 的状态;
currentState = currentReducer(currentState, action)
这里的 currentReducer 是一个函数,他接受两个参数:当前状态 和 action,然后返回计算出来的新的状态;
然后遍历 nextListeners 列表,调用每个监听函数;

replaceReducer

</>复制代码

  1. function replaceReducer(nextReducer) {
  2. // 判断参数是否是函数类型
  3. if (typeof nextReducer !== "function") {
  4. throw new Error("Expected the nextReducer to be a function.")
  5. }
  6. currentReducer = nextReducer
  7. dispatch({ type: ActionTypes.INIT })
  8. }

这个函数可以替换 store 当前的 reducer 函数,首先直接把 currentReducer = nextReducer,直接替换;
然后 dispatch({ type: ActionTypes.INIT }) ,用来初始化替换后 reducer 生成的初始化状态并且赋予 store 的状态;

observable

</>复制代码

  1. function observable() {
  2. var outerSubscribe = subscribe
  3. return {
  4. subscribe(observer) {
  5. if (typeof observer !== "object") {
  6. throw new TypeError("Expected the observer to be an object.")
  7. }
  8. function observeState() {
  9. if (observer.next) {
  10. observer.next(getState())
  11. }
  12. }
  13. observeState()
  14. var unsubscribe = outerSubscribe(observeState)
  15. return { unsubscribe }
  16. },
  17. [$$observable]() {
  18. return this
  19. }
  20. }
  21. }

对于这个函数,是不直接暴露给开发者的,它提供了给其他观察者模式/响应式库的交互操作,具体可看 https://github.com/zenparsing/es-observable

last

最后执行 dispatch({ type: ActionTypes.INIT }),用来根据 reducer 初始化 store 的状态。

compose.js

compose 可以接受一组函数参数,从右到左来组合多个函数,然后返回一个组合函数;

</>复制代码

  1. export default function compose(...funcs) {
  2. if (funcs.length === 0) {
  3. return arg => arg
  4. }
  5. if (funcs.length === 1) {
  6. return funcs[0]
  7. }
  8. const last = funcs[funcs.length - 1]
  9. const rest = funcs.slice(0, -1)
  10. return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
  11. }
applyMiddleware.js

</>复制代码

  1. export default function applyMiddleware(...middlewares) {
  2. // 这个返回的函数就是 enhancer,接受 createStore 函数,再返回一个函数,接受的其实只有 reducer 和 preloadedState;
  3. return (createStore) => (reducer, preloadedState, enhancer) => {
  4. var store = createStore(reducer, preloadedState, enhancer)
  5. var dispatch = store.dispatch
  6. var chain = []
  7. // 暴漏 getState 和 dispatch 给 第三方中间价使用
  8. var middlewareAPI = {
  9. getState: store.getState,
  10. dispatch: (action) => dispatch(action)
  11. }
  12. // 创造第三方中间件使用 middlewareAPI 后返回的函数组成的数组
  13. chain = middlewares.map(middleware => middleware(middlewareAPI))
  14. // 结合这一组函数 和 dispatch 组成的新的 dispatch,然后这个暴漏给用户使用,而原有的 store.dispatch 是不变的,但是不暴漏
  15. dispatch = compose(...chain)(store.dispatch)
  16. return {
  17. ...store,
  18. dispatch
  19. }
  20. }
  21. }

applyMiddleware 函数的作用是组合 多个 中间件等等,然后返回一个函数(enhancer

还记得在 createStore 中的一段吗:

</>复制代码

  1. if (typeof enhancer !== "undefined") {
  2. if (typeof enhancer !== "function") {
  3. throw new Error("Expected the enhancer to be a function.")
  4. }
  5. return enhancer(createStore)(reducer, preloadedState)
  6. }

这里 enhancer === applyMiddleware(...)

然后再执行 enhancer(createStore) 继续之后的操作;

这里 enhancer(createStore) 等同于 (reducer, preloadedState, enhancer) => { ... }

然后再执行 enhancer(createStore)(reducer, preloadedState)

再回到 applyMiddleware ,这里调用了 var store = createStore(reducer, preloadedState, enhancer)
如上所见,这里执行的时候已经没有 enhancer 参数了,因此会再次执行 createStore 函数的全部部分,然后得到一个返回的实例 store

之后会生成一个新的 dispatch ,先保存下来原生的 dispatchvar dispatch = store.dispatch

</>复制代码

  1. var middlewareAPI = {
  2. getState: store.getState,
  3. dispatch: (action) => dispatch(action)
  4. }

这一步是把 store 的 getStatedispatch 接口暴露给中间件来操作: chain = middlewares.map(middleware => middleware(middlewareAPI))

最后组合 全部中间件的返回值(函数)chainstore.dispatch,然后返回新的 dispatchdispatch = compose(...chain)(store.dispatch)

这里的 dispatch 并不是原有的 store 的,而是经过组合中间件之后新的 dispatch

最后返回暴露给用户的接口:

</>复制代码

  1. return {
  2. ...store,
  3. dispatch
  4. }

主要还是 store 原有的接口,但是用新的 dispatch 替换了原有的;这个函数其实就是根据中间件和store的接口生成新的 dispatch 然后暴露给用户。

combineReducers.js

这个函数可以组合一组 reducers(对象) ,然后返回一个新的 reducer 函数给 createStore 使用。

它接受一组 reducers 组成的对象,对象的 key 是对应 value(reducer函数)的状态名称;

比如: { userInfo: getUserInfo, list: getList }

userInfo 是根据 getUserInfo 函数计算出来的;

那么 store 里面的 state 结构就会是: { userInfo: ..., list: ... }

</>复制代码

  1. export default function combineReducers(reducers) {
  2. // 根据 reducers 生成最终合法的 finalReducers:value 为 函数
  3. var reducerKeys = Object.keys(reducers)
  4. var finalReducers = {}
  5. for (var i = 0; i < reducerKeys.length; i++) {
  6. var key = reducerKeys[i]
  7. if (process.env.NODE_ENV !== "production") {
  8. if (typeof reducers[key] === "undefined") {
  9. warning(`No reducer provided for key "${key}"`)
  10. }
  11. }
  12. if (typeof reducers[key] === "function") {
  13. finalReducers[key] = reducers[key]
  14. }
  15. }
  16. var finalReducerKeys = Object.keys(finalReducers)
  17. if (process.env.NODE_ENV !== "production") {
  18. var unexpectedKeyCache = {}
  19. }
  20. // 验证 reducer 是否合法
  21. var sanityError
  22. try {
  23. assertReducerSanity(finalReducers)
  24. } catch (e) {
  25. sanityError = e
  26. }
  27. // 返回最终生成的 reducer
  28. return function combination(state = {}, action) {
  29. if (sanityError) {
  30. throw sanityError
  31. }
  32. if (process.env.NODE_ENV !== "production") {
  33. var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache)
  34. if (warningMessage) {
  35. warning(warningMessage)
  36. }
  37. }
  38. var hasChanged = false
  39. var nextState = {}
  40. for (var i = 0; i < finalReducerKeys.length; i++) {
  41. var key = finalReducerKeys[i]
  42. var reducer = finalReducers[key]
  43. var previousStateForKey = state[key]
  44. var nextStateForKey = reducer(previousStateForKey, action)
  45. if (typeof nextStateForKey === "undefined") {
  46. var errorMessage = getUndefinedStateErrorMessage(key, action)
  47. throw new Error(errorMessage)
  48. }
  49. nextState[key] = nextStateForKey
  50. hasChanged = hasChanged || nextStateForKey !== previousStateForKey
  51. }
  52. // 遍历一遍看是否改变,然后返回原有状态值或者新的状态值
  53. return hasChanged ? nextState : state
  54. }
  55. }

最终返回一个 combination 也就是真正传入 createStore 的 reducer 函数;

这是一个标准的 reducer 函数,接受一个初始化状态 和 一个 action 参数;

每次调用的时候会去遍历 finalReducer (有效的 reducer 列表),获取列表中每个 reducer 对应的先前状态: var previousStateForKey = state[key]
看到这里就应该明白传入的 reducers 组合为什么 key 要和 store 里面的 state 的 key 相对应;

然后得到当前遍历项的下一个状态: var nextStateForKey = reducer(previousStateForKey, action)
然后把它添加到整体的下一个状态: nextState[key] = nextStateForKey

每次遍历会判断整体状态是否改变: hasChanged = hasChanged || nextStateForKey !== previousStateForKey

在最后,如果没有改变就返回原有状态,如果改变了就返回新生成的状态对象: return hasChanged ? nextState : state

bindActionCreators.js

bindActionCreators 函数可以生成直接触发 action 的函数;

实质上它只说做了这么一个操作 bindActionFoo = (...args) => dispatch(actionCreator(...args))

因此我们直接调用 bindActionFoo 函数就可以改变状态了;

接受两个参数,一个是 actionCreators( actionCreator 组成的对象,key 对于生成的函数名/或者是一个 actionCreator ),一个是 dispatch, store 实例中获取;

</>复制代码

  1. function bindActionCreator(actionCreator, dispatch) {
  2. return (...args) => dispatch(actionCreator(...args))
  3. }
  4. export default function bindActionCreators(actionCreators, dispatch) {
  5. // 是一个函数,直接返回一个 bindActionCreator 函数,这个函数调用 dispatch 触发 action
  6. if (typeof actionCreators === "function") {
  7. return bindActionCreator(actionCreators, dispatch)
  8. }
  9. if (typeof actionCreators !== "object" || actionCreators === null) {
  10. throw new Error(
  11. `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? "null" : typeof actionCreators}. ` +
  12. `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
  13. )
  14. }
  15. // 遍历对象,然后对每个遍历项的 actionCreator 生成函数,将函数按照原来的 key 值放到一个对象中,最后返回这个对象
  16. var keys = Object.keys(actionCreators)
  17. var boundActionCreators = {}
  18. for (var i = 0; i < keys.length; i++) {
  19. var key = keys[i]
  20. var actionCreator = actionCreators[key]
  21. if (typeof actionCreator === "function") {
  22. boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
  23. }
  24. }
  25. return boundActionCreators
  26. }
总结

阅读了一遍 Redux 的源码,实在是太精妙了,少依赖,少耦合,纯函数式。

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

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

相关文章

  • redux源码解读--applyMiddleware源码解析

    摘要:的中间件主要是通过模块实现的。返回的也是一个对象这个其实就是,各个中间件的最底层第三层的哪个函数组成的圆环函数构成的这就是对源码的一个整体解读,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 applyMiddleware源码解析 中间件机制在redux中是强大且便捷的,利用redux的中间件我们能够实现日志记录,异步调用等多种十分实用的功能。redux的中间件主要是...

    Atom 评论0 收藏0
  • 源码解析redux-thunk

    摘要:的返回值是函数,这个函数经调用,传入参数,之后会在中间件链上进行传递,只要保证每个中间件的参数是并且将传递给下一个中间件。 了解了Redux原理之后,我很好奇Redux中间件是怎么运作的,于是选了最常用的redux-thunk进行源码分析。 此次分析用的redux-thunk源码版本是2.2.0,redux源码版本是3.7.2。并且需要了解Redux原理 redux中间件都是由redu...

    simpleapples 评论0 收藏0
  • redux源码解读--compose源码解析

    摘要:源码解析模块的代码十分简练,但是实现的作用却是十分强大。只传递一个参数的时候,就直接把这个函数返回返回组合函数这就是对源码的一个整体解读,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注源码解读仓库 compose源码解析 compose模块的代码十分简练,但是实现的作用却是十分强大。redux为何称为redux?有人说就是reduce和flux的结合体,而reduce正是comp...

    lk20150415 评论0 收藏0
  • redux源码解读--createStore源码解析

    摘要:源码解析是最核心的模块。比如,当我们需要使用中间件的时候,就会像第三个参数传递一个返回值是一个。后续的源码解读和测试例子可以关注源码解读仓库 createStore源码解析 createStore是redux最核心的模块。这个模块就是用于创建一个store对象,同时,对外暴露出dispatch,getState,subscribe和replaceReducer方法。(源码中关于obse...

    tianren124 评论0 收藏0
  • Redux 源码解析 - Redux 的架构

    摘要:要应用于生成环境必须要用或者,是的进化产物,优于。我们来看一下他的源码,从而学一些东西。里面都是一个一个的模块,一共个模块,都导出了一些的方法,比如这个号函数,一个匿名函数,然后导出他写的方法。整体架构就是这样的。主要用于压缩的时候。 redux很小的一个框架,是从flux演变过来的,尽管只有775行,但是它的功能很重要。react要应用于生成环境必须要用flux或者redux,red...

    lylwyy2016 评论0 收藏0
  • redux源码解析

    摘要:前言的源码是我阅读过的一些库的源码中,相对简单的。在更新完成后,同时会更新,并依次执行监听者列表。使用新的替换现有的,同时执行是随机的字符串。会为注册监听器,监听器存储在数组中,返回的函数则会注销监听器。使用管道,将逐层的进行包装 showImg(https://segmentfault.com/img/remote/1460000019425043?w=1380&h=810); sh...

    chanjarster 评论0 收藏0

发表评论

0条评论

Batkid

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<