redux 源码整理分析学习

    1. redux/src/index.js
    1. /**
    2.  * 导出redux文件
    3.  */
    5. import createStore from './createStore'
    6. import combineReducers from './combineReducers'
    7. import bindActionCreators from './bindActionCreators'
    8. import applyMiddleware from './applyMiddleware'
    9. import compose from './compose'
    10. import warning from './utils/warning'
    11. import __DO_NOT_USE__ActionTypes from './utils/actionTypes'
    13. /*
    14.  * This is a dummy function to check if the function name has been altered by minification.
    15.  * If the function has been minified and NODE_ENV !== 'production', warn the user.
    16.  */
    17. function isCrushed() {}
    19. if (
    20.   process.env.NODE_ENV !== 'production' &&
    21.   typeof isCrushed.name === 'string' &&
    22.   isCrushed.name !== 'isCrushed'
    23. ) {
    24.   warning(
    25.     'You are currently using minified code outside of NODE_ENV === "production". ' +
    26.       'This means that you are running a slower development build of Redux. ' +
    27.       'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' +
    28.       'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' +
    29.       'to ensure you have the correct code for your production build.'
    30.   )
    31. }
    33. export {
    34.   createStore,
    35.   combineReducers,
    36.   bindActionCreators,
    37.   applyMiddleware,
    38.   compose,
    39.   __DO_NOT_USE__ActionTypes
    40. }
    1. createStore.js文件
    1. import $$observable from 'symbol-observable'
    3. // 定义初始化的action
    4. import ActionTypes from './utils/actionTypes'
    5. import isPlainObject from './utils/isPlainObject'
    7. /**
    8.  * Creates a Redux store that holds the state tree.
    9.  * The only way to change the data in the store is to call `dispatch()` on it.
    10.  *
    11.  * There should only be a single store in your app. To specify how different
    12.  * parts of the state tree respond to actions, you may combine several reducers
    13.  * into a single reducer function by using `combineReducers`.
    14.  *
    15.  * @param {Function} reducer A function that returns the next state tree, given
    16.  * the current state tree and the action to handle.
    17.  *
    18.  * @param {any} [preloadedState] The initial state. You may optionally specify it
    19.  * to hydrate the state from the server in universal apps, or to restore a
    20.  * previously serialized user session.
    21.  * If you use `combineReducers` to produce the root reducer function, this must be
    22.  * an object with the same shape as `combineReducers` keys.
    23.  *
    24.  * @param {Function} [enhancer] The store enhancer. You may optionally specify it
    25.  * to enhance the store with third-party capabilities such as middleware,
    26.  * time travel, persistence, etc. The only store enhancer that ships with Redux
    27.  * is `applyMiddleware()`.
    28.  *
    29.  * @returns {Store} A Redux store that lets you read the state, dispatch actions
    30.  * and subscribe to changes.
    31.    @param {Function} reducer : 这个函数接收state和action，作一系列计算之后返回一个新的state。
    32.    这里就体现了函数式编程的一些特性:
    33.    第一，这个reducer是一个纯函数，纯函数的特点是：对于相同的输入，永远会得到相同的输出，而且没有
    34.    任何可观察的副作用，也不依赖外部环境的状态。不理解纯函数的筒子们，可以上网搜索一下。
    35.    第二，state是不可变的，我们这里对state作的一些修改和计算，不是直接修改原来的数据，而是返回修改
    36.    之后的数据，原来的数据是保持不变。这里可以衍生到immutable，可以使用immutable和redux搭配使用。
    37.    2、@param {any} [preloadedState]
    38.    这是初始化的state
    39.    3、@param {Function} [enhancer]
    40.    这个enhancer其实就是一个中间件，它在redux3.1.0之后才加入的。相当于把store做一些增强处理，
    41.    让store更强大，功能更丰富，在之后的applyMiddleware那里会详细说的。这里也体现了高阶函数的思想，
    42.    就像react-redux的connect方法一样，做一些包装处理之后，再返回。
    43.    4、@returns {Store}
    44.    这是返回的值，返回的是一棵状态树，也就是store啦。
    45.  */
    46. // createStore返回的最常用的三个api是dispatch，subscribe，getState，一般我们只要传入
    47. // reducer和preloadedState， 就可以直接调用这三个方法，非常方便。
    48. export default function createStore(reducer, preloadedState, enhancer) {
    50.   // 1. preloadedState , enhancer都为function则报错
    52.   if (
    53.     (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
    54.     (typeof enhancer === 'function' && typeof arguments[3] === 'function')
    55.   ) {
    56.     throw new Error(
    57.       'It looks like you are passing several store enhancers to ' +
    58.         'createStore(). This is not supported. Instead, compose them ' +
    59.         'together to a single function.'
    60.     )
    61.   }
    64.   // 要保证enhance为function， 如果preloaderState为function，enhancer为undefined,
    65.   // 则交换 enhancer = preloadedState
    66.   if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
    67.     enhancer = preloadedState
    68.     preloadedState = undefined
    69.   }
    71.   // 如果传入了第三个参数，但不是一个函数，就报错
    72.   if (typeof enhancer !== 'undefined') {
    73.     if (typeof enhancer !== 'function') {
    74.       throw new Error('Expected the enhancer to be a function.')
    75.     }
    77.     //这是一个高阶函数调用方法。这里的enhancer就是applyMiddleware(...middlewares)
    78.     //enhancer接受createStore作为参数，对createStore的能力进行增强，并返回增强后的createStore
    79.     //然后再将reducer和preloadedState作为参数传给增强后的createStore，得到最终生成的store
    80.     // 对自己进行功能的增强
    81.     return enhancer(createStore)(reducer, preloadedState)
    82.   }
    84.   //reducer不是函数，报错
    85.   if (typeof reducer !== 'function') {
    86.     throw new Error('Expected the reducer to be a function.')
    87.   }
    89.   // 定义变量
    90.   let currentReducer = reducer  // 赋值为reducer
    91.   let currentState = preloadedState  // 赋值preloadedState
    92.   let currentListeners = []  // 当前的监听器列表
    93.   let nextListeners = currentListeners //更新后的监听器列表
    94.   let isDispatching = false //是否正在dispatch
    96.   /**
    97.    * This makes a shallow copy of currentListeners so we can use
    98.    * nextListeners as a temporary list while dispatching.
    99.    *
    100.    * This prevents any bugs around consumers calling
    101.    * subscribe/unsubscribe in the middle of a dispatch.
    102.    */
    103.   // 判断当前listener和更新后的listener是不是同一个引用，如果是的话对当前listener进行一个拷贝，
    104.   防止在操作新的listener列表的时候对正在发生的业务逻辑造成影响
    105.   function ensureCanMutateNextListeners() {
    106.     if (nextListeners === currentListeners) {
    107.       nextListeners = currentListeners.slice()
    108.     }
    109.   }
    111.   /**
    112.    * Reads the state tree managed by the store.
    113.    *
    114.    * @returns {any} The current state tree of your application.
    115.    */
    116.   // 获取当前的state，如果正在发起isDispatching， 不能直接调用state；
    117.   // 返回当前的state列表
    118.   function getState() {
    119.     if (isDispatching) {
    120.       throw new Error(
    121.         'You may not call store.getState() while the reducer is executing. ' +
    122.           'The reducer has already received the state as an argument. ' +
    123.           'Pass it down from the top reducer instead of reading it from the store.'
    124.       )
    125.     }
    127.     return currentState
    128.   }
    130.   /**
    131.    * Adds a change listener. It will be called any time an action is dispatched,
    132.    * and some part of the state tree may potentially have changed. You may then
    133.    * call `getState()` to read the current state tree inside the callback.
    134.    *
    135.    * You may call `dispatch()` from a change listener, with the following
    136.    * caveats:
    137.    *
    138.    * 1. The subscriptions are snapshotted just before every `dispatch()` call.
    139.    * If you subscribe or unsubscribe while the listeners are being invoked, this
    140.    * will not have any effect on the `dispatch()` that is currently in progress.
    141.    * However, the next `dispatch()` call, whether nested or not, will use a more
    142.    * recent snapshot of the subscription list.
    143.    *
    144.    * 2. The listener should not expect to see all state changes, as the state
    145.    * might have been updated multiple times during a nested `dispatch()` before
    146.    * the listener is called. It is, however, guaranteed that all subscribers
    147.    * registered before the `dispatch()` started will be called with the latest
    148.    * state by the time it exits.
    149.    *
    150.    * @param {Function} listener A callback to be invoked on every dispatch.
    151.    * @returns {Function} A function to remove this change listener.
    152.    */
    154.   // 这个函数是给store添加监听函数
    155.   // listener： 每一个dispatch的后都会执行listener， 传入listener
    156.   // 注册监听这个函数之后，subscribe方法会返回一个unsubscribe()方法，来注销刚才添加的监听函数
    158.   function subscribe(listener) {
    159.     // 为参数添加验证
    160.     if (typeof listener !== 'function') {
    161.       throw new Error('Expected the listener to be a function.')
    162.     }
    164.     if (isDispatching) {
    165.       throw new Error(
    166.         'You may not call store.subscribe() while the reducer is executing. ' +
    167.           'If you would like to be notified after the store has been updated, subscribe from a ' +
    168.           'component and invoke store.getState() in the callback to access the latest state. ' +
    169.           'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
    170.       )
    171.     }
    173.     let isSubscribed = true
    175.     ensureCanMutateNextListeners()
    176.     nextListeners.push(listener)
    178.     return function unsubscribe() {
    179.       if (!isSubscribed) {
    180.         return
    181.       }
    183.       if (isDispatching) {
    184.         throw new Error(
    185.           'You may not unsubscribe from a store listener while the reducer is executing. ' +
    186.             'See https://redux.js.org/api-reference/store#subscribelistener for more details.'
    187.         )
    188.       }
    190.       isSubscribed = false
    192.       ensureCanMutateNextListeners()
    193.       const index = nextListeners.indexOf(listener)
    194.       nextListeners.splice(index, 1)
    195.       currentListeners = null
    196.     }
    197.   }
    199.   /**
    200.    * Dispatches an action. It is the only way to trigger a state change.
    201.    *
    202.    * The `reducer` function, used to create the store, will be called with the
    203.    * current state tree and the given `action`. Its return value will
    204.    * be considered the **next** state of the tree, and the change listeners
    205.    * will be notified.
    206.    *
    207.    * The base implementation only supports plain object actions. If you want to
    208.    * dispatch a Promise, an Observable, a thunk, or something else, you need to
    209.    * wrap your store creating function into the corresponding middleware. For
    210.    * example, see the documentation for the `redux-thunk` package. Even the
    211.    * middleware will eventually dispatch plain object actions using this method.
    212.    *
    213.    * @param {Object} action A plain object representing “what changed”. It is
    214.    * a good idea to keep actions serializable so you can record and replay user
    215.    * sessions, or use the time travelling `redux-devtools`. An action must have
    216.    * a `type` property which may not be `undefined`. It is a good idea to use
    217.    * string constants for action types.
    218.    *
    219.    * @returns {Object} For convenience, the same action object you dispatched.
    220.    *
    221.    * Note that, if you use a custom middleware, it may wrap `dispatch()` to
    222.    * return something else (for example, a Promise you can await).
    223.    */
    224.   function dispatch(action) {
    225.     if (!isPlainObject(action)) {
    226.       throw new Error(
    227.         'Actions must be plain objects. ' +
    228.           'Use custom middleware for async actions.'
    229.       )
    230.     }
    232.     if (typeof action.type === 'undefined') {
    233.       throw new Error(
    234.         'Actions may not have an undefined "type" property. ' +
    235.           'Have you misspelled a constant?'
    236.       )
    237.     }
    239.     if (isDispatching) {
    240.       throw new Error('Reducers may not dispatch actions.')
    241.     }
    243.     try {
    244.       isDispatching = true
    245.       currentState = currentReducer(currentState, action)
    246.     } finally {
    247.       isDispatching = false
    248.     }
    250.     const listeners = (currentListeners = nextListeners)
    251.     for (let i = 0; i < listeners.length; i++) {
    252.       const listener = listeners[i]
    253.       listener()
    254.     }
    256.     return action
    257.   }
    259.   /**
    260.    * Replaces the reducer currently used by the store to calculate the state.
    261.    *
    262.    * You might need this if your app implements code splitting and you want to
    263.    * load some of the reducers dynamically. You might also need this if you
    264.    * implement a hot reloading mechanism for Redux.
    265.    *
    266.    * @param {Function} nextReducer The reducer for the store to use instead.
    267.    * @returns {void}
    268.    */
    269.   function replaceReducer(nextReducer) {
    270.     if (typeof nextReducer !== 'function') {
    271.       throw new Error('Expected the nextReducer to be a function.')
    272.     }
    274.     currentReducer = nextReducer
    276.     // This action has a similiar effect to ActionTypes.INIT.
    277.     // Any reducers that existed in both the new and old rootReducer
    278.     // will receive the previous state. This effectively populates
    279.     // the new state tree with any relevant data from the old one.
    280.     dispatch({ type: ActionTypes.REPLACE })
    281.   }
    283.   /**
    284.    * Interoperability point for observable/reactive libraries.
    285.    * @returns {observable} A minimal observable of state changes.
    286.    * For more information, see the observable proposal:
    287.    * https://github.com/tc39/proposal-observable
    288.    */
    289.   function observable() {
    290.     const outerSubscribe = subscribe
    291.     return {
    292.       /**
    293.        * The minimal observable subscription method.
    294.        * @param {Object} observer Any object that can be used as an observer.
    295.        * The observer object should have a `next` method.
    296.        * @returns {subscription} An object with an `unsubscribe` method that can
    297.        * be used to unsubscribe the observable from the store, and prevent further
    298.        * emission of values from the observable.
    299.        */
    300.       subscribe(observer) {
    301.         if (typeof observer !== 'object' || observer === null) {
    302.           throw new TypeError('Expected the observer to be an object.')
    303.         }
    305.         function observeState() {
    306.           if (observer.next) {
    307.             observer.next(getState())
    308.           }
    309.         }
    311.         observeState()
    312.         const unsubscribe = outerSubscribe(observeState)
    313.         return { unsubscribe }
    314.       },
    316.       [$$observable]() {
    317.         return this
    318.       }
    319.     }
    320.   }
    322.   // When a store is created, an "INIT" action is dispatched so that every
    323.   // reducer returns their initial state. This effectively populates
    324.   // the initial state tree.
    325.   dispatch({ type: ActionTypes.INIT })
    327.   return {
    328.     dispatch,
    329.     subscribe,
    330.     getState,
    331.     replaceReducer,
    332.     [$$observable]: observable
    333.   }
    334. }