redux源码解析，函数式编程
Posted chenby
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了redux源码解析，函数式编程相关的知识，希望对你有一定的参考价值。
提到redux，会想到函数式编程。什么是函数式编程？是一种很奇妙的函数式的编程方法。你会感觉函数式编程这么简单，但是用起来却很方便很神奇。
在《functional javascript》中，作者批评了java那种任何东西都用对象来写程序的方式，提倡了这种函数式编程。
之前看过一些函数式编程的例子(以下简称fp)。提到fp会想到underscore和lodash，你会看到lodash的包中，唯一一个文件夹就是fp，里面是fp相关的函数。
在redux中，也是运用了很多fp的函数。其实在写js中经常用到fp，但是你不清楚。比如ajax的callback即是一种fp的思想。
接上文（点此飞到上文：redux的架构），redux的一号函数，一个fp的经典函数，组合函数：（复制此函数直接测试）
function(module, exports) { "use strict"; exports.__esModule = true; exports["default"] = compose; /** * Composes single-argument functions from right to left. * * @param {...Function} funcs The functions to compose. * @returns {Function} A function obtained by composing functions from right to * left. For example, compose(f, g, h) is identical to arg => f(g(h(arg))). */ function compose() { for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) { funcs[_key] = arguments[_key]; //把所有参数都复制到funcs数组里 } return function () { if (funcs.length === 0) { return arguments.length <= 0 ? undefined : arguments[0]; } //如果没有参数返回undefined var last = funcs[funcs.length - 1]; //最后一个参数 var rest = funcs.slice(0, -1); //剩下的前几个参数 return rest.reduceRight(function (composed, f) { return f(composed); }, last.apply(undefined, arguments)); //执行最后一个参数并且把返回值交给下前一个参数。 }; //当然，想改变顺序也可以不用reduceRight换为reduce } },
比如compose(f, g, h)就会这样执行=> f(g(h(arg)))。这个函数的简化版就是这样：
var compose = function(f,g) { return function(x) { return f(g(x)); }; };
但是这函数不支持多参数。我们看看那里用到了这个函数，直接跳到5号函数：
function(module, exports, __webpack_require__) { \'use strict\'; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; exports.__esModule = true; exports["default"] = applyMiddleware; var _compose = __webpack_require__(1); var _compose2 = _interopRequireDefault(_compose); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } /** * 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. */ function applyMiddleware() { for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) { //跟compose一样处理参数 middlewares[_key] = arguments[_key]; } return function (createStore) { return function (reducer, initialState, enhancer) { var store = createStore(reducer, initialState, enhancer);//传入createStore方法 var _dispatch = store.dispatch; //重要的dispatch方法 var chain = []; var middlewareAPI = { //需要传入middleware的reduxAPI getState: store.getState, dispatch: function dispatch(action) { return _dispatch(action); } }; chain = middlewares.map(function (middleware) { //遍历每个中间件把reduxAPI传进去。返回一个封装好的中间件 return middleware(middlewareAPI); }); _dispatch = _compose2["default"].apply(undefined, chain)(store.dispatch); //相当于compose(...chain)(store.dispatch) return _extends({}, store, { //然后给store重写的这个执行完中间件的dispatch方法。 dispatch: _dispatch }); }; }; }
看到导入的方法了吗，var _compose = __webpack_require__(1);然后在redux的applyMiddleware用到了这个compose。
我们回想一下applyMiddleware是干什么用的----使用包含自定义功能的 middleware 来扩展 Redux 是一种推荐的方式。Middleware 可以让你包装 store 的dispatch方法来达到你想要的目的。同时， middleware 还拥有“可组合”这一关键特性。多个 middleware 可以被组合到一起使用，形成 middleware 链。其中，每个 middleware 都不需要关心链中它前后的 middleware 的任何信息。
其中用的最多的就是thunkmiddleware。其实thunk也是fp的一种。。。这里不多说了。看这个applyMiddleware怎么调用呢?
createStore这个函数在别的模块先不说，thunk是redux-thunk导出的函数。它的compose函数做了什么？
参数是封装好的中间件，利用apply传入，利用compose挨个执行，执行顺序从右到左。并传入dispatch给它用。
图上只有一个中间件thunk，执行完 return function (reducer, initialState, enhancer) {}，下面又传入了reducer，就开始执行这个函数了，需要传入middleware的reduxAPI，执行中间件传入dispatch，到最后返回一个重写dispatch的store，也就是图上这个store。这个store到底是什么？这得看一下var store = createStore(reducer, initialState, enhancer);这句的createStore方法。
这样2个模块就介绍完了。是不是so easy。
回到我们的2号函数。超级长。就是我们的createStore。是整个redux的最重要的部分。
模块2里面用到了模块4，简单介绍一下：
解释为Checks if `value` is a plain object, that is, an object created by the `Object` constructor or one with a `[[Prototype]]` of `null`.
检查一个对象是不是plain object，就是由Object构造的或者[[Prototype]]属性是null的对象。比如
function Foo() { this.a = 1; } _.isPlainObject(new Foo); // => false _.isPlainObject([1, 2, 3]); // => false _.isPlainObject({ \'x\': 0, \'y\': 0 }); // => true _.isPlainObject(Object.create(null)); // => true
函数和数组都不是，对象会返回true。好模块4就讲完了。
回到模块2，看注释就能明白这些函数的作用。
function(module, exports, __webpack_require__) { \'use strict\'; exports.__esModule = true; exports.ActionTypes = undefined; exports["default"] = createStore; var _isPlainObject = __webpack_require__(4); var _isPlainObject2 = _interopRequireDefault(_isPlainObject); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; } /** * These are private action types reserved by Redux. * For any unknown actions, you must return the current state. * If the current state is undefined, you must return the initial state. * Do not reference these action types directly in your code. */ var ActionTypes = exports.ActionTypes = { INIT: \'@@redux/INIT\' }; /** * 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 {any} [initialState] 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 {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()`. * * @returns {Store} A Redux store that lets you read the state, dispatch actions * and subscribe to changes. */ function createStore(reducer, initialState, enhancer) { if (typeof initialState === \'function\' && typeof enhancer === \'undefined\') { //判断初始store不能是函数，如果是函数 enhancer = initialState; //传给enhancer initialState = undefined; } if (typeof enhancer !== \'undefined\') { if (typeof enhancer !== \'function\') { throw new Error(\'Expected the enhancer to be a function.\'); } return enhancer(createStore)(reducer, initialState); //传给enhancer之后先调用enhancer，传入createStore，然后 } //给它参数，这个函数参数是createStore，所以这个enhancer随便传是不行的。里面的逻辑要自己处理reducer和initialState
//有一种用法是：
//const store = createStore(reducer, initialState, compose(
// applyMiddleware(thunk),
// window.devToolsExtension ? window.devToolsExtension() : f => f
// })
//把applyMiddleware和redux devTools组合起来放到第三个参数，可以这样用就是因为在createStore里面会传给第三个参数传自身和reducer，store这些来操作store
));
if (typeof reducer !== \'function\') { //reducer必须是个函数 throw new Error(\'Expected the reducer to be a function.\'); } var currentReducer = reducer;
var currentState = initialState; var currentListeners = []; //当前监听事件列表 var nextListeners = currentListeners; //注意这里是等号
var isDispatching = false; function ensureCanMutateNextListeners() { if (nextListeners === currentListeners) { //如果监听序列等于当前序列，这里的等号是判断引用是否相同 nextListeners = currentListeners.slice(); //复制一份当前监听序列 } } /** * Reads the state tree managed by the store. * * @returns {any} The current state tree of your application. */ function getState() { //重要的getState方法，只是返回了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 states 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. */ function subscribe(listener) { //redux的subscribe方法 if (typeof listener !== \'function\') { throw new Error(\'Expected listener to be a function.\'); } var isSubscribed = true; ensureCanMutateNextListeners(); //保证修改nextListeners不会改了currentListeners nextListeners.push(listener); //把这个监听加到复制过的监听事件列表，这样nextListeners就和currentListeners不同了。 return function unsubscribe() { //跟许多事件系统一样，返回一个取消事件绑定的函数 if (!isSubscribed) { return; } isSubscribed = false; ensureCanMutateNextListeners(); var 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). */ function dispatch(action) { if (!(0, _isPlainObject2["default"])(action)) { //用到模块4的函数。这个action必须是这样一个普通对象 throw new Error(\'Actions must be plain objects. \' + \'Use custom middleware for async actions.\'); } if (typeof action.type === \'undefined\') { throw new Error(\'Actions may not have an undefined "type" property. \' + \'Have you misspelled a constant?\'); } if (isDispatching) { throw new Error(\'Reducers may not dispatch actions.\'); } try { isDispatching = true; //避免处理多次 currentState = currentReducer(currentState, action); //主要是这句，把当前的state经过reducer处理 } finally { isDispatching = false; } var listeners = currentListeners = nextListeners; //当前监听列表变为修改过的nextListeners for (var i = 0; i < listeners.length; i++) { //处理完state以后执行所有注册过的监听函数 listeners[i](); } 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} */ function replaceReducer(nextReducer) { if (typeof nextReducer !== \'function\') { throw new Error(\'Expected the nextReducer to be a function.\'); } currentReducer = nextReducer; //代替当前reducer dispatch({ type: ActionTypes.INIT }); } // 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. dispatch({ type: ActionTypes.INIT }); //触发一个内部dispatch return { //这是store导出的方法。刚刚模块2返回也重写了dispatch，但是应该没有改变 dispatch: dispatch, subscribe: subscribe, getState: getState, replaceReducer: replaceReducer }; }
这样大家就大概明白store了，注册监听函数，dispatch，经过reducer处理，然后触发监听函数，最后返回该store。
这里值得注意的是 ensureCanMutateNextListeners函数和nextListeners和currentListeners。
nextListeners仅是currentListeners的一个引用。这样经过ensureCanMutateNextListeners肯定是全等（===）的，然后nextListeners成为了currentListeners的一个复制。后来处理的都是这个nextListeners。
那么为什么要写两个listeners呢？
情况1,当监听器里面如果有subscribe或unsubscribe,如果操作一个listeners，就会循环修改listeners，执行顺序是不是一团糟？
那么怎么保证顺序呢？
var listeners = currentListeners = nextListeners;
这个listeners不会变，为什么呢，每次修改都修改nextListeners对吗，然而在每次在执行监听或者取消监听的时候，是不是都会执行那个复制函数？这样nextListeners会被修改，这时他已经脱离这个三等式了，这个listeners就不变了，执行顺序也就保证了。
如果没有上面情况1的话，每次都复制一遍的话那不就白slice()了？
所以它用了这个函数ensureCanMutateNextListeners，每次只在添加监听或者取消监听的时候复制当前监听列表，那损失就会降到最低了吧～
接下来3号函数：
没什么。导出一个warning函数，做警告用。
函数6号呢，写了bindActionCreators，这个redux的方法。我们看一下源码。
function(module, exports) { \'use strict\'; exports.__esModule = true; exports["default"] = bindActionCreators; function bindActionCreator(actionCreator, dispatch) { return function () { return dispatch(actionCreator.apply(undefined, arguments)); //把actionCreator封装一层dispatch，就像我在初入redux的时候说的， //省的在组件里dispatch，麻烦也不好看。 }; } /** * Turns an object whose values are action creators, into an object with the * same keys, but with every function wrapped into a `dispatch` call so they * may be invoked directly. This is just a convenience method, as you can call * `store.dispatch(MyActionCreators.doSomething())` yourself just fine. * * For convenience, you can also pass a single function as the first argument, * and get a function in return. * * @param {Function|Object} actionCreators An object whose values are action * creator functions. One handy way to obtain it is to use ES6 `import * as` * syntax. You may also pass a single function. * * @param {Function} dispatch The `dispatch` function available on your Redux * store. * * @returns {Function|Object} The object mimicking the original object, but with * every action creator wrapped into the `dispatch` call. If you passed a * function as `actionCreators`, the return value will also be a single * function. */ function bindActionCreators(actionCreators, dispatch) { if (typeof actionCreators === \'function\') { //做一些判断，actionCreators是函数的时候就封装一层dispatch return bindActionCreator(actionCreators, dispatch); } if (typeof actionCreators !== \'object\' || actionCreators === null) { throw new Error(\'bindActionCreators expected an object or a function, instead received \' + (actionCreators === null ? \'null\' : typeof actionCreators) + \'. \' + \'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?\'); } //是对象的时候 var keys = Object.keys(actionCreators); var boundActionCreators = {}; for (var i = 0; i < keys.length; i++) { var key = keys[i]; var actionCreator = actionCreators[key]; //把这个对象里的每一项都遍历一下，只要是函数就封装一层dispatch if (typeof actionCreator === \'function\') { boundActionCreators[key] = bindActionCreator(actionCreator, dispatch); } } return boundActionCreators; //返回这个封装完dispatch的这个对象。 } },
给ActionCreators封装一层dispatch，也简单。
7号函数：主要是combineReducers方法。
function combineReducers(reducers) { var reducerKeys = Object.keys(reducers); var finalReducers = {}; for (var i = 0; i < reducerKeys.length; i++) { //遍历所有reducers，把是函数的reducers放到finalReducers里，为了防止reducer不是函数 var key = reducerKeys[i]; if (typeof reducers[key] === \'function\') { finalReducers[key] = reducers[key]; } } var finalReducerKeys = Object.keys(finalReducers); var sanityError; try { assertReducerSanity(finalReducers); } catch (e) { sanityError = e; } return function combination() { var state = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];//reducer当然是传state进来再返回新state，这里就是传入的state var action = arguments[1];//第二个参数是action if (sanityError) { throw sanityError; } if (true) { var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action); if (warningMessage) { (0, _warning2["default"])(warningMessage); } } var hasChanged = false; var nextState = {}; for (var i = 0; i < finalReducerKeys.length; i++) { //遍历所有reducers，让他们都处理一次state var key = finalReducerKeys[i]; var reducer = finalReducers[key]; //从reducers中取出一个reducer var previousStateForKey = state[key]; //改变之前的state var nextStateForKey = reducer(previousStateForKey, action);//state经过reducer处理后的state if (typeof nextStateForKey === \'undefined\') { var errorMessage = getUndefinedStateErrorMessage(key, action); throw new Error(errorMessage); } nextState[key] = nextStateForKey; //改变后的state保存到nextState里 hasChanged = hasChanged || nextStateForKey !== previousStateForKey; //判断state改变没 } return hasChanged ? nextState : state; //要是不变就返回原来的state不然返回新state }; }
组合了reducer，原理也简单，遍历一下剔除不是函数的reducer，让他们都处理一下state，返回新state
最后一个，8号函数：
这是检测这个对象是不是ie9-的host obj。原理就是许多这种对象没有toString方法，但是可以转化为字符串。
现在所有都讲完了，是不是觉得看源码也没那么难，redux的方法实现很简单，而且都是纯函数，你看reducer处理的时候不是改变state而是返回新state。这就保证了函数的”纯“，在fp中纯函数才是好函数。
谢谢大家。
以上是关于redux源码解析，函数式编程的主要内容，如果未能解决你的问题，请参考以下文章