资讯专栏INFORMATION COLUMN

redux源码解读--createStore源码解析

tianren124 / 2604人阅读

摘要:源码解析是最核心的模块。比如,当我们需要使用中间件的时候,就会像第三个参数传递一个返回值是一个。后续的源码解读和测试例子可以关注源码解读仓库

createStore源码解析

createStoreredux最核心的模块。这个模块就是用于创建一个store对象,同时,对外暴露出dispatch,getState,subscribereplaceReducer方法。(源码中关于observable的部分可以忽略,这个是redux内部使用的。我们在开发中几乎几乎用不到)

先看一下这个模块的基本结构:

依赖

lodash/isPlainObject

symbol-observable

对外输出

dispatch

getState

subscribe

replaceReducer

[$$observable](几乎不用)

</>复制代码

  1. redux源码中使用的lodash/isPlainObject依赖。在IE6-8中性能很差,其实现方式和jQuery3.x的实现相似,在旧版本的IE中支持不了。最后会和大家一起探讨。

源码注释

</>复制代码

  1. // 判断是不是纯粹对象的模块({})
  2. import isPlainObject from "lodash/isPlainObject"
  3. // 引入observable支持
  4. import $$observable from "symbol-observable"

</>复制代码

  1. export const ActionTypes = {
  2. INIT: "@@redux/INIT"
  3. }

上面这个是redux内部使用的一个action。主要用于内部测试和渲染初始的state。记住,我们自己编写action的时候,action.type不能为@@redux/INIT。因为,这个action会在redux的内部自动调用。比如,下面的捣蛋代码:

</>复制代码

  1. import {createStore, combineReducers, applyMiddleware} from "../src"
  2. import logger from "redux-logger"
  3. const actionTypes = "@@redux/INIT"
  4. const reducers = (state = {}, action) => {
  5. switch(action.type) {
  6. case actionTypes:
  7. console.log("hello @@redux/INIT")
  8. return {
  9. "type": actionTypes
  10. }
  11. default:
  12. return state
  13. }
  14. }
  15. const store = createStore(reducers, applyMiddleware(logger))
  16. console.log("*************************************")
  17. console.log(store.getState()) //会渲染为 {"type": "@@redux/INIT"}
  18. console.log("*************************************")

下面就是createStore方法的实现:

</>复制代码

  1. export default function createStore(reducer, preloadedState, enhancer){
  2. //...初始条件的判断和设定
  3. function getState() {
  4. // getState方法的实现
  5. }
  6. function subscribe() {
  7. // subscribe方法的实现
  8. }
  9. function dispatch() {
  10. // dispatch方法的实现
  11. }
  12. function replaceReducer() {
  13. // replaceReducer方法的实现
  14. }
  15. function observable() {
  16. // observable方法的实现
  17. }
  18. // store被创建后,自动分发一个"INIT" action。渲染出初始化的state树。
  19. dispatch({ type: ActionTypes.INIT })
  20. }

下面就来一点点分析每一行代码到底做什么:

</>复制代码

  1. if (typeof preloadedState === "function" && typeof enhancer === "undefined") {
  2. enhancer = preloadedState
  3. preloadedState = undefined
  4. }

在调用createStore的方法的时候,可以传递三个参数createStore(reducer, preloadedState, enhancer)。其中,各参数属性如下:

reducer必需参数,function类型

preloadedState可选参数,object类型

enhancer可选参数,function类型

在平常的使用中,我们一般会省略第二个参数。比如,当我们需要使用redux中间件的时候,就会像第三个参数传递一个applyMiddleware()[返回值是一个function]。如果,我们没有初始状态,则会省略第二个参数。这个时候,我们的函数调用形式为:

</>复制代码

  1. const store = createStore(reducer, applyMiddleware(...))

这个时候就会执行上面源码中的代码,使函数调用满足最基本的形式调用。也就是函数在传递两个或者三个参数的情况下,其内部处理逻辑都是一样的。

</>复制代码

  1. // 如果我们指定了reducer增强器enhancer
  2. if (typeof enhancer !== "undefined") {
  3. // enhancer必须是一个函数
  4. if (typeof enhancer !== "function") {
  5. throw new Error("Expected the enhancer to be a function.")
  6. }
  7. // 这个函数接收createStore作为参数,并且返回一个函数,这个函数接收的参数是reducer,preloadedState
  8. // 直接返回经过enhancer包装的对象
  9. return enhancer(createStore)(reducer, preloadedState)
  10. }

想更好的理解这段代码,可以参考applyMiddleware内部的实现。

</>复制代码

  1. // 要求传递给createStore的第一个参数必须是一个函数
  2. if (typeof reducer !== "function") {
  3. throw new Error("Expected the reducer to be a function.")
  4. }

</>复制代码

  1. // 保存初始的reducer
  2. let currentReducer = reducer
  3. // 保存初始的state
  4. let currentState = preloadedState
  5. // 保存所有的事件监听器
  6. let currentListeners = []
  7. // 获取当前监听器的一个副本(相同的引用)
  8. let nextListeners = currentListeners
  9. // 是否正在派发action
  10. let isDispatching = false
  11. function ensureCanMutateNextListeners() {
  12. // 如果nextListeners和currentListeners具有相同的引用,则获取一份当前事件监听器集合的一个副本保存到nextListeners中
  13. if (nextListeners === currentListeners) {
  14. nextListeners = currentListeners.slice()
  15. }
  16. }

上面就是createStore方法中的一些初始参数,这里有一个地方值得思考:为什么要维护两份事件监听器列表(nextListeners,currentListeners)?。下面,我们会解释。

</>复制代码

  1. // 直接返回当前store的state
  2. function getState() {
  3. return currentState
  4. }

</>复制代码

  1. function subscribe(listener) {
  2. // 事件监听器必须是函数,否则会抛出异常
  3. if (typeof listener !== "function") {
  4. throw new Error("Expected listener to be a function.")
  5. }
  6. // 这个事件监听器是否已经被取消的标志(个人感觉:这个初始值应该被设置为false,语意化更好一些。)
  7. let isSubscribed = true
  8. // 调用这个函数的结果就是生成一份当前事件监听器的一个副本保存到nextListeners中
  9. ensureCanMutateNextListeners()
  10. // 将新的事件监听器添加到nextListeners中
  11. nextListeners.push(listener)
  12. // 返回一个取消监听的函数
  13. return function unsubscribe() {
  14. // 如果这个监听器已经被取消了,则直接return
  15. if (!isSubscribed) {
  16. return
  17. }
  18. // 将监听器是否取消的标志设置为false
  19. isSubscribed = false
  20. // 再次生成一份事件监听器集合的副本
  21. ensureCanMutateNextListeners()
  22. // 获取到需要取消的事件监听器的索引
  23. const index = nextListeners.indexOf(listener)
  24. // 从事件监听器集合中删除这个事件监听器
  25. nextListeners.splice(index, 1)
  26. }
  27. }

subscribe方法的源码中可以看出,每次在进行监听器的添加/删除之前,都会基于当前的监听器集合生成一个副本保存到nextListeners中。这个时候还是不能准确的回答上面的问题,下面我们继续研究dispatch的源码:

</>复制代码

  1. function dispatch(action) {
  2. // dispatch的参数就是我们需要派发的action,一定要保证这个action是一个纯粹的对象
  3. // 如果不是一个纯粹的对象,则会抛出异常。
  4. if (!isPlainObject(action)) {
  5. // 这个方法有坑,在低版本的IE浏览器中性能很差,最后我们会研究这个方法的源码。
  6. throw new Error(
  7. "Actions must be plain objects. " +
  8. "Use custom middleware for async actions."
  9. )
  10. }
  11. // 所派发的action必须有一个type属性(我们可以将这个属性认为就是action的身份证,这样redux才知道你派发的是哪个action,你需要做什么,该怎么为你做)
  12. // 如果没有这个属性则会抛出异常
  13. if (typeof action.type === "undefined") {
  14. throw new Error(
  15. "Actions may not have an undefined "type" property. " +
  16. "Have you misspelled a constant?"
  17. )
  18. }
  19. // 如果redux正在派发action,则抛出异常?什么时候会出现这种情况???
  20. if (isDispatching) {
  21. throw new Error("Reducers may not dispatch actions.")
  22. }
  23. try {
  24. isDispatching = true
  25. // 派发action
  26. // 实质就是将当前的state和你需要派发的action传递给reducer函数病返回一个新的state
  27. currentState = currentReducer(currentState, action)
  28. } finally {
  29. isDispatching = false
  30. }
  31. // 这一块也是一个十分关键的地方,哈哈哈哈哈,又多了一份事件监听器的列表,简单的说一下这三份列表的作用
  32. // nextListeners: 保存这次dispatch后,需要触发的所有事件监听器的列表
  33. // currentListeners: 保存一份nextListeners列表的副本
  34. // listeners: 需要执行的列表
  35. const listeners = currentListeners = nextListeners
  36. for (let i = 0; i < listeners.length; i++) {
  37. const listener = listeners[i]
  38. // 调用所有的事件监听器
  39. listener()
  40. }
  41. // dispatch的返回值也是十分重要的,如果没有这个返回值,就不可能引入强大的中间件机制。
  42. return action
  43. }

到这里,我们就可以回答这个问题了:为什么要维护两份事件监听器列表(nextListeners,currentListeners)?

首先,我们必须要知道的事情就是:我们的监听器在什么时候会执行?在我们的调用dispatch派发action之后。ok,看下面的这个图:

这个图表示,当dispatch方法执行到这行代码的时候,listenerscurrentListenersnextListeners这三个变量引用内存中的同一份数组,只要其中一个发生变化,另外两个立马改变。和下面的这个例子一样的含义:

所以,在这种情况下。如果我在某个事件监听器函数中调用了取消了某个监听器,那么在这次dispatch后,被取消的这个事件监听器就不会被执行了(?????是吗????)。

</>复制代码

  1. import {createStore, combineReducers, applyMiddleware} from "../src"
  2. import logger from "redux-logger"
  3. const actionTypes = "@@redux/INIT"
  4. const reducers = (state = {}, action) => {
  5. switch(action.type) {
  6. case actionTypes:
  7. return {
  8. "type": actionTypes
  9. }
  10. default:
  11. return state
  12. }
  13. }
  14. const store = createStore(reducers, applyMiddleware(logger))
  15. const listener1 = store.subscribe(() => {
  16. console.log("listener1")
  17. })
  18. const listener2 = store.subscribe(() => {
  19. // 取消listener3
  20. listener3()
  21. console.log("listener2")
  22. })
  23. const listener3 = store.subscribe(() => {
  24. console.log("listener3")
  25. })
  26. store.dispatch({type: actionTypes})

结果是:

</>复制代码

  1. listener1
  2. listener2
  3. listener3

结果,就是:即使你在某个事件监听器中,取消了其它的事件监听器,那么被取消的这个事件监听器,在这次dispatch后仍然会执行。也就是说。redux会保证在某个dispatch后,会保证在这个dispatch之前的所有事件监听器全部执行。

这是个bug还是个feature。无从而知,但是从redux源码中,可以知道,这是一个bug。所以,redux作者就利用上面的方法很巧妙的避免了这种情况。其实实现的方法很简单:切断nextListeners和currentListener,listeners相同的引用关系

下面接着扯:

</>复制代码

  1. // 提换reducer的方法。(动态加载reducers的时候才用)
  2. function replaceReducer(nextReducer) {
  3. if (typeof nextReducer !== "function") {
  4. throw new Error("Expected the nextReducer to be a function.")
  5. }
  6. currentReducer = nextReducer
  7. // 替换结束后,重新初始化
  8. dispatch({ type: ActionTypes.INIT })
  9. }

</>复制代码

  1. // 触发预设action,主要就是为了生成初始的state tree的结构
  2. dispatch({ type: ActionTypes.INIT })

</>复制代码

  1. // 这就很熟悉了吧
  2. return {
  3. dispatch,
  4. subscribe,
  5. getState,
  6. replaceReducer,
  7. // 尼玛 忽略这个
  8. [$$observable]: observable
  9. }

这就是对createStore源码的一个整体解读,水平有限,欢迎拍砖。后续的源码解读和测试例子可以关注:redux源码解读仓库

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

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

相关文章

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

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

    Atom 评论0 收藏0
  • Redux 入坑进阶 - 源码解析

    摘要:否则的话,认为只是一个普通的,将通过也就是进一步分发。在本组件内的应用传递给子组件源码解析期待一个作为传入,里面是如果只是传入一个,则通过返回被绑定到的函数遍历并通过分发绑定至将其声明为的属性之一接收的作为传入。 原文链接:https://github.com/ecmadao/Co...转载请注明出处 本文不涉及redux的使用方法,因此可能更适合使用过redux的玩家翻阅? 预热...

    BothEyes1993 评论0 收藏0
  • 重读redux源码(二)

    摘要:函数组合,科里化的串联结合示例源码,实现也很优雅,对于返回的,将等参数传递进去,然后执行,等待回调异步完成再。对于正常对象则进行下一步。前言 作为前端状态管理器,这个比较跨时代的工具库redux有很多实现和思想值得我们思考。在深入源码之前,我们可以相关注下一些常见问题,这样带着问题去看实现,也能更加清晰的了解。 常见问题 大概看了下主要有这么几个: redux三大原则 这个可以直接参考...

    dingda 评论0 收藏0
  • 不一样的redux源码解读

    摘要:这里还有一个疑问点就是的嵌套,最开始也我不明白,看了源码才知道,这里返回的也是接受也就是一个所以可以正常嵌套。以作为参数,调用上一步返回的函数以为参数进行调用。 1、本文不涉及redux的使用方法,因此可能更适合使用过 redux 的同学阅读2、当前redux版本为4.0.13、更多系列文章请看 Redux作为大型React应用状态管理最常用的工具。虽然在平时的工作中很多次的用到了它...

    Salamander 评论0 收藏0
  • redux源码阅读--主模块

    摘要:主模块的入口模块就是。主要就做两件事引入个功能模块,并挂载至同一个对象上,对外暴露。在非环境下压缩代码,给予警告。后续的源码解读和测试例子可以关注源码解读仓库 主模块 redux的入口模块就是src/index.js。这个文件的代码十分简单。主要就做两件事: 引入个功能模块,并挂载至同一个对象上,对外暴露。 在非production环境下压缩代码,给予警告。 下面是模块的源码(只包...

    testHs 评论0 收藏0

发表评论

0条评论

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