redux源码浅入浅出
运用redux有一段时间了，包括redux-thunk和redux-saga处理异步action都有一定的涉及，现在技术栈转向阿里的dva+antd，好用得不要不要的，但是需要知己知彼要对react家族有一点源码上的深入了，就从redux开始吧。
redux源码是那么简洁、清晰、干净，让我忍不住一口气全部看完了还意犹未尽的写一篇随笔，mark一下，过段时间回头再重新细细评味学习一波。原谅我把整片代码贴出来，因为我懒啊，我会尽量把代码注解写详细一点。
index
redux对外暴露出的api，这里可以看出文件结构和功能块相关分得很清晰。
import createStore from './createStore' import combineReducers from './combineReducers' import bindActionCreators from './bindActionCreators' import applyMiddleware from './applyMiddleware' import compose from './compose' import warning from './utils/warning' import __DO_NOT_USE__ActionTypes from './utils/actionTypes' /* * This is a dummy function to check if the function name has been altered by minification. * If the function has been minified and NODE_ENV !== 'production', warn the user. */ // isCrushed 函数仅仅用于判断代码是否处于压缩并再压缩时抛出警告 function isCrushed() {} if ( process.env.NODE_ENV !== 'production' && typeof isCrushed.name === 'string' && isCrushed.name !== 'isCrushed' ) { warning( 'You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.' ) } export { createStore, combineReducers, bindActionCreators, applyMiddleware, compose, __DO_NOT_USE__ActionTypes }
createStore
redux最重要的api，用于构建Store，并在创建以后还有自己的api，结构十分的清晰
import $$observable from 'symbol-observable'
import ActionTypes from './utils/actionTypes'
import isPlainObject from './utils/isPlainObject'
/**
* Creates a Redux store that holds the state tree.
* The only way to change the data in the store is to call `dispatch()` on it.
*
* There should only be a single store in your app. To specify how different
* parts of the state tree respond to actions, you may combine several reducers
* into a single reducer function by using `combineReducers`.
*
* @param {Function} reducer A function that returns the next state tree, given
* the current state tree and the action to handle.
* @param {Function} reducer：返回一个完整独立全新的state tree，接受参数（当前state，需要触发actions集合）
*
* @param {any} [preloadedState] The initial state. You may optionally specify it
* to hydrate the state from the server in universal apps, or to restore a
* previously serialized user session.
* If you use `combineReducers` to produce the root reducer function, this must be
* an object with the same shape as `combineReducers` keys.
* @param {any} [preloadedState] 初始化state，不是必需，可以与服务端渲染水合初始状态，
* 如果使用combineReduers必需与其中key值一一对应，查看combineReduers实现
*
* @param {Function} [enhancer] The store enhancer. You may optionally specify it
* to enhance the store with third-party capabilities such as middleware,
* time travel, persistence, etc. The only store enhancer that ships with Redux
* is `applyMiddleware()`.
* @param {Function} [enhancer] store的外挂，常用middleware中间件，其他暂时不去深入
*
* @returns {Store} A Redux store that lets you read the state, dispatch actions
* and subscribe to changes.
*/
export default function createStore(reducer, preloadedState, enhancer) {
// 判断参数个数，类似jq===on参数处理方式
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
// 首先判断enhancer（常见的便是middlewares中间件），循环回调将跳过此处
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
// middlewares详细解释返回值，
return enhancer(createStore)(reducer, preloadedState)
}
// redux为了方便开发者做了很多友好的提示，只有深入源码才知道的良苦用心，reducer只接受是一个函数
if (typeof reducer !== 'function') {
throw new Error('Expected the reducer to be a function.')
}
// 保存当前的传入值，后边会涉及到这些值的来回更迭
let currentReducer = reducer
let currentState = preloadedState
let currentListeners = []
// 监听函数事件队列 为什么不写成let nextListeners = currentListeners = [] 风格吗?
// 还有为什么需要两个listener数组来存放呢？答案再订阅和dispatch里面
let nextListeners = currentListeners
// 是否处于dispatch过程中，我也好奇异步dispatch的时候将怎么变化
let isDispatching = false
// 当前监听队列与接下来的监听队列指向同一个数组时，slice出新的数组
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
// 还是为了去除引用，完成next和current的交替，可以将next看作是current的快照
nextListeners = currentListeners.slice()
}
}
/**
* Reads the state tree managed by the store.
*
* @returns {any} The current state tree of your application.
*/
// 只有在非触发状态才能通过api获取当前state的快照
function getState() {
if (isDispatching) {
throw new Error(
'You may not call store.getState() while the reducer is executing. ' +
'The reducer has already received the state as an argument. ' +
'Pass it down from the top reducer instead of reading it from the store.'
)
}
// 注意这里闭包了，直接给里currentState，且他是时常变化的值，需要再稳定的时候取值
return currentState
}
/**
* Adds a change listener. It will be called any time an action is dispatched,
* and some part of the state tree may potentially have changed. You may then
* call `getState()` to read the current state tree inside the callback.
*
* You may call `dispatch()` from a change listener, with the following
* caveats:
*
* 1. The subscriptions are snapshotted just before every `dispatch()` call.
* If you subscribe or unsubscribe while the listeners are being invoked, this
* will not have any effect on the `dispatch()` that is currently in progress.
* However, the next `dispatch()` call, whether nested or not, will use a more
* recent snapshot of the subscription list.
*
* 2. The listener should not expect to see all state changes, as the state
* might have been updated multiple times during a nested `dispatch()` before
* the listener is called. It is, however, guaranteed that all subscribers
* registered before the `dispatch()` started will be called with the latest
* state by the time it exits.
*
* @param {Function} listener A callback to be invoked on every dispatch.
* @returns {Function} A function to remove this change listener.
*/
// dva里面也有监听器，下次去看看源码
function subscribe(listener) {
// 老规矩容错
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}
if (isDispatching) {
throw new Error(
'You may not call store.subscribe() while the reducer is executing. ' +
'If you would like to be notified after the store has been updated, subscribe from a ' +
'component and invoke store.getState() in the callback to access the latest state. ' +
'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
)
}
// 监听已经完成标志，用于清除监听
let isSubscribed = true
// 函数入其名，得到nextListeners
ensureCanMutateNextListeners()
// 将监听的事件添加到nextListeners队列中，注意可能添加了队列中已有的事件，不管执行两遍
nextListeners.push(listener)
// 返回函数可以移除事件监听
return function unsubscribe() {
// 只移除一次
if (!isSubscribed) {
return
}
if (isDispatching) {
throw new Error(
'You may not unsubscribe from a store listener while the reducer is executing. ' +
'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
)
}
// 控制标志位，不多余移除
isSubscribed = false
// 再次得到新的nextListeners
ensureCanMutateNextListeners()
// 感觉这里如果注册两个相同的事件，会移除前面那个，不知道会不会有问题
const index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1)
}
}
/**
* Dispatches an action. It is the only way to trigger a state change.
*
* The `reducer` function, used to create the store, will be called with the
* current state tree and the given `action`. Its return value will
* be considered the **next** state of the tree, and the change listeners
* will be notified.
*
* The base implementation only supports plain object actions. If you want to
* dispatch a Promise, an Observable, a thunk, or something else, you need to
* wrap your store creating function into the corresponding middleware. For
* example, see the documentation for the `redux-thunk` package. Even the
* middleware will eventually dispatch plain object actions using this method.
*
* @param {Object} action A plain object representing “what changed”. It is
* a good idea to keep actions serializable so you can record and replay user
* sessions, or use the time travelling `redux-devtools`. An action must have
* a `type` property which may not be `undefined`. It is a good idea to use
* string constants for action types.
*
* @returns {Object} For convenience, the same action object you dispatched.
*
* Note that, if you use a custom middleware, it may wrap `dispatch()` to
* return something else (for example, a Promise you can await).
*/
// 相当重要的方法，纯粹的dispatch的参数只接受Object类型的，thunk就是对它进行处理进而能传入
// function用回调的形式重新dispatch，下次再详细thunk和saga
function dispatch(action) {
// isPlainObject用于判断是否是对象
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
// action关键字限制为 type，为了不造成命名上的困惑一般type前缀我会设置与文件夹同名
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
// 正在dispatch，这里什么情况会出现这个警告呢！！！
// 在dispatch中嵌套的调用dispatch会触发这类警告，可能是担心dispatchA(dispatchB(dispatchA))的嵌套循环问题把
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
try {
isDispatching = true
// 进行reduce操作，记得参数是当前state和action对象，返回全新的State对象，这一手操作是react就高兴了
currentState = currentReducer(currentState, action)
} finally {
//完成一波reducer记得复位标志，表示我的完成dispatch。
isDispatching = false
}
// 执行事件队列前才拿到最新的listenters，在此之前可能会出现订阅与退订的嵌套等问题，暂存的nextlisteners可以保证dispatch的正常执行
// 假如出现listenerA(){store.subscribe(listenerA);}的嵌套情况，listeners的长度将再每一次执行延长一直至无限长
// 当然如果采用len = listeners.length；直接固定循环次数可以解决现在的情况，但是退订等事件的发生也会出现问题，所以暂存是最安全的做法
const listeners = (currentListeners = nextListeners)
// 为什么要用for循环不用foreach，想想forEach对空元素的处理的性能问题把
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
// 为什么不直接listeners[i]（）执行呢？而是负值单独调用呢？
// 赋值之后this的指向不再是listens而是window
listener()
}
// 返回了整个action对象
return action
}
/**
* Replaces the reducer currently used by the store to calculate the state.
*
* You might need this if your app implements code splitting and you want to
* load some of the reducers dynamically. You might also need this if you
* implement a hot reloading mechanism for Redux.
*
* @param {Function} nextReducer The reducer for the store to use instead.
* @returns {void}
*/
// 替换reducer函数
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.')
}
currentReducer = nextReducer
// 触发私有的replace action
dispatch({ type: ActionTypes.REPLACE })
}
/**
* Interoperability point for observable/reactive libraries.
* @returns {observable} A minimal observable of state changes.
* For more information, see the observable proposal:
* https://github.com/tc39/proposal-observable
*/
// 可以看作是对redux观察者的一个扩展，可作为全局的每次dispatch都执行方法入口
function observable() {
const outerSubscribe = subscribe
return {
/**
* The minimal observable subscription method.
* @param {Object} observer Any object that can be used as an observer.
* The observer object should have a `next` method.
* @returns {subscription} An object with an `unsubscribe` method that can
* be used to unsubscribe the observable from the store, and prevent further
* emission of values from the observable.
*/
// 需要传入一个带next方法的对象，将返回退订钩子
subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
throw new TypeError('Expected the observer to be an object.')
}
function observeState() {
if (observer.next) {
// next方法将获得当时的store
observer.next(getState())
}
}
observeState()
const unsubscribe = outerSubscribe(observeState)
// 返回包含退订对象
return { unsubscribe }
},
// 用于获取observeable，这名字取的。。。
[$$observable]() {
return this
}
}
}
// When a store is created, an "INIT" action is dispatched so that every
// reducer returns their initial state. This effectively populates
// the initial state tree.
// 初始化store对象
dispatch({ type: ActionTypes.INIT })
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
}
compose
一个关于reduce的函数设计，需要特别拿出来说说
/**
* Composes single-argument functions from right to left. The rightmost
* function can take multiple arguments as it provides the signature for
* the resulting composite function.
*
* @param {...Function} funcs The functions to compose.
* @returns {Function} A function obtained by composing the argument functions
* from right to left. For example, compose(f, g, h) is identical to doing
* (...args) => f(g(h(...args))).
*/
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
// reduce用在这里太巧妙了，奇妙的洋葱函数，好吧也没那么奇妙
// compose(f, g, h)(...args) 等同于 f(g(h(...args)))在后面会形成一个currying函数
return funcs.reduce((a, b) => (...args) => a(b(...args)))
}
applyMiddleware
重点，废话不多说直接上代码
import compose from './compose'
/**
* Creates a store enhancer that applies middleware to the dispatch method
* of the Redux store. This is handy for a variety of tasks, such as expressing
* asynchronous actions in a concise manner, or logging every action payload.
*
* See `redux-thunk` package as an example of the Redux middleware.
*
* Because middleware is potentially asynchronous, this should be the first
* store enhancer in the composition chain.
*
* Note that each middleware will be given the `dispatch` and `getState` functions
* as named arguments.
*
* @param {...Function} middlewares The middleware chain to be applied.
* @returns {Function} A store enhancer applying the middleware.
*/
// 非常精髓的一段代码
// createStore中以enhancer(createStore)(reducer, preloadedState)调用
export default function applyMiddleware(...middlewares) {
// 二阶函数参数...args对应reducer, preloadedState
return createStore => (...args) => {
const store = createStore(...args)
// 这里不应该是 const dispatch = store.dispatch？？有些版本出现这样
// 猜测：这里避免使用到没有中间件处理过的disptch，后面将传入完整的store.dispatch作为根参数，
// 求解如果这里只是个警告函数，每个中间件接受到的（{ dispatch, getState }）又是什么呢？
// 好吧，我又又想到答案了，再下面
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
// 中间件获取到的能力，获取store快照（isDispatching？？？怎么判断的），触发reducer
const middlewareAPI = {
getState: store.getState,
// 我就是上面的答案：这里dispatch用闭包并不是直接的引用，dispatch会根据dispatch = compose(...chain)(store.dispatch)
// 而变化，在此之前调用dispatch会爆出警告！！！
dispatch: (...args) => dispatch(...args)
}
// middleware应该是高阶函数，return 了一个function在chain数组
// 对应thunk的createThunkMiddleware({dispatch, getStat})，这里只要注意传入了什么，thunk内详细分析怎么运行中间件
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 将store.dispatch作为二阶参数传入，最终将对应中间件最内层的action，
// 注意下面这个例子：
// applyMiddleware(log1, log2, log3)，在这里通过洋葱函数的处理dispatch变成log11(log22(log33(store.dispatch)))这样一个函数
// log11是log1({dispatch, getState})的返回函数，以此类推，这种结构也限定里中间件函数的基本结构是
// ({ dispatch, getState }) => next => action => {} ，最开始可能对这个结构很迷糊，why，看下面
// 这里就形成一个第一个参数为store.dispatch的currying函数，之后传入的action，dispatch(action)都将一并视为compose(...chain)(store.dispatch)(action)
dispatch = compose(...chain)(store.dispatch)
// 对应返回在了createStore里即Store，全新的dispatch诞生
return {
...store,
dispatch
}
}
}
// 觉得把redux-thunk的代码一起贴出来才有参照性
function createThunkMiddleware(extraArgument) {
// 其实thunk内容实在是简洁，判断类型将dispatch放入到函数里面，这里的dispatch是层层包装过的
// 那么我们来分析针对整个箭头函数和中间件结构进行分析一下
// log11的next(action)对应log22(log33(action))，
// log22的next(action)对应log33(action)，
// log33的next对应store.dispatch,最后返回一个需要传参为action的函数，
// action对应{type: 'TO_DO',text: '1'}一直传递无变化，只有next变化，形成一个层层执行
//
// 而执行顺序有点像冒泡，从外到里再从里到外，如果上面的log每个都有before和after的话，顺序将是
// log11.before > log22.before > log33.before > store.dispatch > log33.after > log22.after > log11.after > end
// 每一个中间件将对dispatch之前和之后作些动作
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;
// export default thunk;
// 调用方式 createStore(reducer, applyMiddleware(thunk))
其他还有几个文件就不贴出来了，只有深入到源码才能感受代码之美，redux简直称为精粹。redux就是典型的百行代码千行文档，也只有看了源码才能略微理解其用途和技巧。我很清楚上面的注解十分的混乱，有的地方描述肯定有误，也没能力三言两语把一个经典框架描述得清楚，敬请谅解，与君共勉。
