正式学习React(四) ----Redux源码分析

  1 import isPlainObject from ‘lodash/isPlainObject‘
  2 import $$observable from ‘symbol-observable‘
  3 
  4 /**
  5  * These are private action types reserved by Redux.
  6  * For any unknown actions, you must return the current state.
  7  * If the current state is undefined, you must return the initial state.
  8  * Do not reference these action types directly in your code.
  9  */
 10 export var ActionTypes = {
 11   INIT: ‘@@redux/INIT‘
 12 }
 13 
 14 /**
 15  * Creates a Redux store that holds the state tree.
 16  * The only way to change the data in the store is to call `dispatch()` on it.
 17  *
 18  * There should only be a single store in your app. To specify how different
 19  * parts of the state tree respond to actions, you may combine several reducers
 20  * into a single reducer function by using `combineReducers`.
 21  *
 22  * @param {Function} reducer A function that returns the next state tree, given
 23  * the current state tree and the action to handle.
 24  *
 25  * @param {any} [preloadedState] The initial state. You may optionally specify it
 26  * to hydrate the state from the server in universal apps, or to restore a
 27  * previously serialized user session.
 28  * If you use `combineReducers` to produce the root reducer function, this must be
 29  * an object with the same shape as `combineReducers` keys.
 30  *
 31  * @param {Function} [enhancer] The store enhancer. You may optionally specify it
 32  * to enhance the store with third-party capabilities such as middleware,
 33  * time travel, persistence, etc. The only store enhancer that ships with Redux
 34  * is `applyMiddleware()`.
 35  *
 36  * @returns {Store} A Redux store that lets you read the state, dispatch actions
 37  * and subscribe to changes.
 38  */
 39 export default function createStore(reducer, preloadedState, enhancer) {

     //如果没有提供初始的state,提供了enhancer,就将初试state置为undefined


 40   if (typeof preloadedState === ‘function‘ && typeof enhancer === ‘undefined‘) {
 41     enhancer = preloadedState
 42     preloadedState = undefined
 43   }
 44 
    
     //确保enhancer一定是函数
 45   if (typeof enhancer !== ‘undefined‘) {
 46     if (typeof enhancer !== ‘function‘) {
 47       throw new Error(‘Expected the enhancer to be a function.‘)
 48     }
 49      //这个会返回一个store,只不过是增强版的。
 50     return enhancer(createStore)(reducer, preloadedState)
 51   }
 52 
      
 53   if (typeof reducer !== ‘function‘) {
 54     throw new Error(‘Expected the reducer to be a function.‘)
 55   }
 56 

      //初始化一些变量，用作闭包。
 57   var currentReducer = reducer          
 58   var currentState = preloadedState    //undefined || 传进来的初始值
 59   var currentListeners = []
 60   var nextListeners = currentListeners
 61   var isDispatching = false 
 62 

      //这个辅助函数是这样的，如果你没有调用dispacth，那么每次调用subscribe来添加监听器的都会被push到nextListenrs,他是currentListerns的一个副本。

      //总的来说这个函数的意义我个人觉得就是保护了currentListeners不被随意污染.保证每次dispacth前状态不变。
 63   function ensureCanMutateNextListeners() {
 64     if (nextListeners === currentListeners) {
 65       nextListeners = currentListeners.slice()
 66     }
 67   }
 68 
 69   /**
 70    * Reads the state tree managed by the store.
 71    *
 72    * @returns {any} The current state tree of your application.
 73    */
       //这个就是返回当前的state
 74   function getState() {
 75     return currentState
 76   }
 77 
 78   /**
 79    * Adds a change listener. It will be called any time an action is dispatched,
 80    * and some part of the state tree may potentially have changed. You may then
 81    * call `getState()` to read the current state tree inside the callback.
 82    *
 83    * You may call `dispatch()` from a change listener, with the following
 84    * caveats:
 85    *
 86    * 1. The subscriptions are snapshotted just before every `dispatch()` call.
 87    * If you subscribe or unsubscribe while the listeners are being invoked, this
 88    * will not have any effect on the `dispatch()` that is currently in progress.
 89    * However, the next `dispatch()` call, whether nested or not, will use a more
 90    * recent snapshot of the subscription list.
 91    *
 92    * 2. The listener should not expect to see all state changes, as the state
 93    * might have been updated multiple times during a nested `dispatch()` before
 94    * the listener is called. It is, however, guaranteed that all subscribers
 95    * registered before the `dispatch()` started will be called with the latest
 96    * state by the time it exits.
 97    *
 98    * @param {Function} listener A callback to be invoked on every dispatch.
 99    * @returns {Function} A function to remove this change listener.
100    */

      //简单点说就是 设置监听函数，每次dispatch(action)的时候，这些传进去的listenr们就会全部被调用
101   function subscribe(listener) {
102     if (typeof listener !== ‘function‘) {
103       throw new Error(‘Expected listener to be a function.‘)
104     }
105 
106     var isSubscribed = true
107 
108     ensureCanMutateNextListeners()
109     nextListeners.push(listener)
110 
111     return function unsubscribe() {
112       if (!isSubscribed) {
113         return
114       }
115 
116       isSubscribed = false
117 
118       ensureCanMutateNextListeners()
119       var index = nextListeners.indexOf(listener)
120       nextListeners.splice(index, 1)
121     }
122   }
123 
124   /**
125    * Dispatches an action. It is the only way to trigger a state change.
126    *
127    * The `reducer` function, used to create the store, will be called with the
128    * current state tree and the given `action`. Its return value will
129    * be considered the **next** state of the tree, and the change listeners
130    * will be notified.
131    *
132    * The base implementation only supports plain object actions. If you want to
133    * dispatch a Promise, an Observable, a thunk, or something else, you need to
134    * wrap your store creating function into the corresponding middleware. For
135    * example, see the documentation for the `redux-thunk` package. Even the
136    * middleware will eventually dispatch plain object actions using this method.
137    *
138    * @param {Object} action A plain object representing “what changed”. It is
139    * a good idea to keep actions serializable so you can record and replay user
140    * sessions, or use the time travelling `redux-devtools`. An action must have
141    * a `type` property which may not be `undefined`. It is a good idea to use
142    * string constants for action types.
143    *
144    * @returns {Object} For convenience, the same action object you dispatched.
145    *
146    * Note that, if you use a custom middleware, it may wrap `dispatch()` to
147    * return something else (for example, a Promise you can await).
148    */

           
      //通知store,我要更新state了。
149   function dispatch(action) {
150     if (!isPlainObject(action)) {
151       throw new Error(
152         ‘Actions must be plain objects. ‘ +
153         ‘Use custom middleware for async actions.‘
154       )
155     }
156 
157     if (typeof action.type === ‘undefined‘) {
158       throw new Error(
159         ‘Actions may not have an undefined "type" property. ‘ +
160         ‘Have you misspelled a constant?‘
161       )
162     }
163 
164     if (isDispatching) {
165       throw new Error(‘Reducers may not dispatch actions.‘)
166     }
167 
168     try {
169       isDispatching = true
170       currentState = currentReducer(currentState, action)
171     } finally {
172       isDispatching = false
173     }
174 
175     var listeners = currentListeners = nextListeners
176     for (var i = 0; i < listeners.length; i++) {
177       var listener = listeners[i]
178       listener()
179     }
180 
181     return action
182   }
183 
184   /**
185    * Replaces the reducer currently used by the store to calculate the state.
186    *
187    * You might need this if your app implements code splitting and you want to
188    * load some of the reducers dynamically. You might also need this if you
189    * implement a hot reloading mechanism for Redux.
190    *
191    * @param {Function} nextReducer The reducer for the store to use instead.
192    * @returns {void}
193    */

      //重置reducer,然后初始化state
194   function replaceReducer(nextReducer) {
195     if (typeof nextReducer !== ‘function‘) {
196       throw new Error(‘Expected the nextReducer to be a function.‘)
197     }
198 
199     currentReducer = nextReducer
200     dispatch({ type: ActionTypes.INIT })
201   }
202 
203   /**
204    * Interoperability point for observable/reactive libraries.
205    * @returns {observable} A minimal observable of state changes.
206    * For more information, see the observable proposal:
207    * https://github.com/zenparsing/es-observable
208    */

      //暂时我还不知道这个有什么吊用，先不管好了。
209   function observable() {
210     var outerSubscribe = subscribe
211     return {
212       /**
213        * The minimal observable subscription method.
214        * @param {Object} observer Any object that can be used as an observer.
215        * The observer object should have a `next` method.
216        * @returns {subscription} An object with an `unsubscribe` method that can
217        * be used to unsubscribe the observable from the store, and prevent further
218        * emission of values from the observable.
219        */
220       subscribe(observer) {
221         if (typeof observer !== ‘object‘) {
222           throw new TypeError(‘Expected the observer to be an object.‘)
223         }
224 
225         function observeState() {
226           if (observer.next) {
227             observer.next(getState())
228           }
229         }
230 
231         observeState()
232         var unsubscribe = outerSubscribe(observeState)
233         return { unsubscribe }
234       },
235 
236       [$$observable]() {
237         return this
238       }
239     }
240   }
241 
242   // When a store is created, an "INIT" action is dispatched so that every
243   // reducer returns their initial state. This effectively populates
244   // the initial state tree.


      //给currentState设定初始状态
245   dispatch({ type: ActionTypes.INIT })
246 
247   return {
248     dispatch,
249     subscribe,
250     getState,
251     replaceReducer,
252     [$$observable]: observable
253   }
254 }

  1 import { ActionTypes } from ‘./createStore‘
  2 import isPlainObject from ‘lodash/isPlainObject‘
  3 import warning from ‘./utils/warning‘
  4 
  5 var NODE_ENV = typeof process !== ‘undefined‘ ? process.env.NODE_ENV : ‘development‘
  6 
  7 function getUndefinedStateErrorMessage(key, action) {
  8   var actionType = action && action.type
  9   var actionName = actionType && `"${actionType.toString()}"` || ‘an action‘
 10 
 11   return (
 12     `Given action ${actionName}, reducer "${key}" returned undefined. ` +
 13     `To ignore an action, you must explicitly return the previous state.`
 14   )
 15 }
 16 
 17 function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, unexpectedKeyCache) {
 18   var reducerKeys = Object.keys(reducers)
 19   var argumentName = action && action.type === ActionTypes.INIT ?
 20     ‘preloadedState argument passed to createStore‘ :
 21     ‘previous state received by the reducer‘
 22 
 23   if (reducerKeys.length === 0) {
 24     return (
 25       ‘Store does not have a valid reducer. Make sure the argument passed ‘ +
 26       ‘to combineReducers is an object whose values are reducers.‘
 27     )
 28   }
 29 
 30   if (!isPlainObject(inputState)) {
 31     return (
 32       `The ${argumentName} has unexpected type of "` +
 33       ({}).toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] +
 34       `". Expected argument to be an object with the following ` +
 35       `keys: "${reducerKeys.join(‘", "‘)}"`
 36     )
 37   }
 38 
 39   var unexpectedKeys = Object.keys(inputState).filter(key =>
 40     !reducers.hasOwnProperty(key) &&
 41     !unexpectedKeyCache[key]
 42   )
 43 
 44   unexpectedKeys.forEach(key => {
 45     unexpectedKeyCache[key] = true
 46   })
 47 
 48   if (unexpectedKeys.length > 0) {
 49     return (
 50       `Unexpected ${unexpectedKeys.length > 1 ? ‘keys‘ : ‘key‘} ` +
 51       `"${unexpectedKeys.join(‘", "‘)}" found in ${argumentName}. ` +
 52       `Expected to find one of the known reducer keys instead: ` +
 53       `"${reducerKeys.join(‘", "‘)}". Unexpected keys will be ignored.`
 54     )
 55   }
 56 }
 57 

 
 58 function assertReducerSanity(reducers) {
 59   Object.keys(reducers).forEach(key => {
 60     var reducer = reducers[key]
 61     var initialState = reducer(undefined, { type: ActionTypes.INIT })
 62 
 63     if (typeof initialState === ‘undefined‘) {
 64       throw new Error(
 65         `Reducer "${key}" returned undefined during initialization. ` +
 66         `If the state passed to the reducer is undefined, you must ` +
 67         `explicitly return the initial state. The initial state may ` +
 68         `not be undefined.`
 69       )
 70     }
 71 
 72     var type = ‘@@redux/PROBE_UNKNOWN_ACTION_‘ + Math.random().toString(36).substring(7).split(‘‘).join(‘.‘)
 73     if (typeof reducer(undefined, { type }) === ‘undefined‘) {
 74       throw new Error(
 75         `Reducer "${key}" returned undefined when probed with a random type. ` +
 76         `Don‘t try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` +
 77         `namespace. They are considered private. Instead, you must return the ` +
 78         `current state for any unknown actions, unless it is undefined, ` +
 79         `in which case you must return the initial state, regardless of the ` +
 80         `action type. The initial state may not be undefined.`
 81       )
 82     }
 83   })
 84 }
 85 
 86 /**
 87  * Turns an object whose values are different reducer functions, into a single
 88  * reducer function. It will call every child reducer, and gather their results
 89  * into a single state object, whose keys correspond to the keys of the passed
 90  * reducer functions.
 91  *
 92  * @param {Object} reducers An object whose values correspond to different
 93  * reducer functions that need to be combined into one. One handy way to obtain
 94  * it is to use ES6 `import * as reducers` syntax. The reducers may never return
 95  * undefined for any action. Instead, they should return their initial state
 96  * if the state passed to them was undefined, and the current state for any
 97  * unrecognized action.
 98  *
 99  * @returns {Function} A reducer function that invokes every reducer inside the
100  * passed object, and builds a state object with the same shape.
101  */
102 export default function combineReducers(reducers) {
103   var reducerKeys = Object.keys(reducers)
104   var finalReducers = {}

      
105   for (var i = 0; i < reducerKeys.length; i++) {
106     var key = reducerKeys[i]
107 
108     if (NODE_ENV !== ‘production‘) {

        //排除undefined.
109       if (typeof reducers[key] === ‘undefined‘) {
110         warning(`No reducer provided for key "${key}"`)
111       }
112     }
113    

       //排除不是func的
114     if (typeof reducers[key] === ‘function‘) {
115       finalReducers[key] = reducers[key]
116     }
117   }
118   var finalReducerKeys = Object.keys(finalReducers)
119 
120   if (NODE_ENV !== ‘production‘) {
121     var unexpectedKeyCache = {}
122   }
123 
124   var sanityError
125   try {
        //这里会对每个子reducer的state进行检查。返回不能为undefined
126     assertReducerSanity(finalReducers)
127   } catch (e) {
128     sanityError = e
129   }
130 

      //我们最最关心的就是这个返回函数，其实我们如果已经堆这个函数有一定的了解，就知道这个函数其实就把子reducers全部在这个函数里执行一边，
      //返回最后的state
131   return function combination(state = {}, action) {
132     if (sanityError) {
133       throw sanityError
134     }
135 
136     if (NODE_ENV !== ‘production‘) {
137       var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache)
138       if (warningMessage) {
139         warning(warningMessage)
140       }
141     }
142 
143     var hasChanged = false
144     var nextState = {}
145     for (var i = 0; i < finalReducerKeys.length; i++) {
146       var key = finalReducerKeys[i]
147       var reducer = finalReducers[key]
148       var previousStateForKey = state[key]
149       var nextStateForKey = reducer(previousStateForKey, action)
150       if (typeof nextStateForKey === ‘undefined‘) {
151         var errorMessage = getUndefinedStateErrorMessage(key, action)
152         throw new Error(errorMessage)
153       }
154       nextState[key] = nextStateForKey
155       hasChanged = hasChanged || nextStateForKey !== previousStateForKey
156     }
157     return hasChanged ? nextState : state
158   }
159 }

 1 /**
 2  * Composes single-argument functions from right to left. The rightmost
 3  * function can take multiple arguments as it provides the signature for
 4  * the resulting composite function.
 5  *
 6  * @param {...Function} funcs The functions to compose.
 7  * @returns {Function} A function obtained by composing the argument functions
 8  * from right to left. For example, compose(f, g, h) is identical to doing
 9  * (...args) => f(g(h(...args))).
10  */
11 
12 export default function compose(...funcs) {
13     
14      //funcs就是我们传入的中间件，fn1,fn2...
15      //如果什么都没有，就返回一个function(arg){return arg};当作默认的中间件
16   if (funcs.length === 0) {
17     return arg => arg
18   }
19 
20 
21      //排除所有中间件参数中不是function的
22   funcs = funcs.filter(func => typeof func === ‘function‘)
23 
24 
25       //如果只有一个中间件参数，就把这个唯一的中间件返回。
26   if (funcs.length === 1) {
27     return funcs[0]
28   }
29 
30      //如果中间件参数个数超过1个
31 
32      //取出最后一个中间件参数
33   const last = funcs[funcs.length - 1]
34 
35      //将funcs中最开头到倒数第二个的数组复制一份，即排除了最后一个中间件
36   const rest = funcs.slice(0, -1)
37 
38 
39   //返回(...args) => f(g(h(...args))).
40   return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
41 }

 1 import compose from ‘./compose‘
 2 
 3 /**
 4  * Creates a store enhancer that applies middleware to the dispatch method
 5  * of the Redux store. This is handy for a variety of tasks, such as expressing
 6  * asynchronous actions in a concise manner, or logging every action payload.
 7  *
 8  * See `redux-thunk` package as an example of the Redux middleware.
 9  *
10  * Because middleware is potentially asynchronous, this should be the first
11  * store enhancer in the composition chain.
12  *
13  * Note that each middleware will be given the `dispatch` and `getState` functions
14  * as named arguments.
15  *
16  * @param {...Function} middlewares The middleware chain to be applied.
17  * @returns {Function} A store enhancer applying the middleware.
18  */
19 export default function applyMiddleware(...middlewares) {

     //短短几行，很简单哟。
     //返回我们在creteStore里看到的enhancer

20   return (createStore) => (reducer, preloadedState, enhancer) => {
21     var store = createStore(reducer, preloadedState, enhancer)
22     var dispatch = store.dispatch
23     var chain = []
24 
25     var middlewareAPI = {
26       getState: store.getState,
27       dispatch: (action) => dispatch(action)
28     }

      //将 当前store的getState和dispacth方法挂载到中间件里。
29     chain = middlewares.map(middleware => middleware(middlewareAPI))
30     dispatch = compose(...chain)(store.dispatch)
31 
32     return {
33       ...store,
34       dispatch
35     }
36   }
37 }

 1 function bindActionCreator(actionCreator, dispatch) {
 2   return (...args) => dispatch(actionCreator(...args))
 3 }
 4 
 5 /**
 6  * Turns an object whose values are action creators, into an object with the
 7  * same keys, but with every function wrapped into a `dispatch` call so they
 8  * may be invoked directly. This is just a convenience method, as you can call
 9  * `store.dispatch(MyActionCreators.doSomething())` yourself just fine.
10  *
11  * For convenience, you can also pass a single function as the first argument,
12  * and get a function in return.
13  *
14  * @param {Function|Object} actionCreators An object whose values are action
15  * creator functions. One handy way to obtain it is to use ES6 `import * as`
16  * syntax. You may also pass a single function.
17  *
18  * @param {Function} dispatch The `dispatch` function available on your Redux
19  * store.
20  *
21  * @returns {Function|Object} The object mimicking the original object, but with
22  * every action creator wrapped into the `dispatch` call. If you passed a
23  * function as `actionCreators`, the return value will also be a single
24  * function.
25  */
26 export default function bindActionCreators(actionCreators, dispatch) {
27   if (typeof actionCreators === ‘function‘) {
28     return bindActionCreator(actionCreators, dispatch)
29   }
30 
31   if (typeof actionCreators !== ‘object‘ || actionCreators === null) {
32     throw new Error(
33       `bindActionCreators expected an object or a function, instead received ${actionCreators === null ? ‘null‘ : typeof actionCreators}. ` +
34       `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`
35     )
36   }
37 
38   var keys = Object.keys(actionCreators)
39   var boundActionCreators = {}
40   for (var i = 0; i < keys.length; i++) {
41     var key = keys[i]
42     var actionCreator = actionCreators[key]
43     if (typeof actionCreator === ‘function‘) {
44       boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
45     }
46   }
47   return boundActionCreators
48 }