首页 > 代码库 > 正式学习React(四) ----Redux源码分析
正式学习React(四) ----Redux源码分析
今天看了下Redux的源码,竟然出奇的简单,好吧。简单翻译做下笔记:
喜欢的同学自己可以去github上看:点这里
createStore.js
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 }
关于 createStore,我们就关注它返回的对象,subscribe是订阅监听函数的,getState是返回state的,dispacth是发布消息的,更新state的。
剩下那2个就不管他算了。
combineReducers.js
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 }
compose.js
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 }
解释完compose.js,我们可以简单的理解为: compose就是用来将函数组合起来使用。
假如:compose(f, g, h) 分装后:(...args) => f(g(h(...args))).
applyMiddleware.js
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 }
假如我们在代码里看到:
const store = applyMiddleware(promise, thunk, observable)(createStore)(reducer);
亦或是
const store =
createStore(
reducer,state,
applyMiddleware(promise, thunk, observable)
);
我们根据上面的代码走一遍,看看是怎么个执行过程。
1: applyMiddleware(promise, thunk, observable) 会返回enhancer.
2:enhancer(createStore) 返回一个将中间件参数都闭包进来的 createStore函数,此时我们叫他加强版!我给他标注是红色;
3:createStore
(reducer) 然后就是上面代码的21-34行。 最后我们关心一下这个返回的store里的dispatch,其实是加强版的,因为里面是执行中间件的!!但是中间件里面到底干了什么,
我们目前不得而知,总之记住,dispacth现在牛逼了就行。比如可以处理异步啦等等。
bindActionCreators.js
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 }
这个东西唯一的好处是往下传actionCreator和dispatch的时候,少些代码,无形中在props里加了内容!!!!
具体应用场景,大家自行谷歌。因为我也才学这个第8天,这函数我自己都没用过····哈哈。不过以后肯定要用了!!!
代码十分简单,我就不分析了。
这里有一篇园内的朋友写的它的应用,凑合看吧:点这里
正式学习React(四) ----Redux源码分析
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。