Redux系列x：源码解析-阿里云开发者社区

写在前面

redux的源码很简洁，除了applyMiddleware比较绕难以理解外，大部分还是

这里假设读者对redux有一定了解，就不科普redux的概念和API啥的啦，这部分建议直接看官方文档。

此外，源码解析的中文批注版已上传至github，可点击查看。本文相关示例代码，可点击查看。

源码解析概览

将redux下载下来，然后看下他的目录结构。

npm install redux

这里我们需要关心的主要是src目录，源码解析需要关心的文件都在这里面了

index.js：redux主文件，主要对外暴露了几个核心API
createStore.js：createStore 方法的定义
utils：各种工具方法，其中applyMiddleware、combineReducers、bindActionCreators 为redux的几个核心方法，剩余的pick、mapValue、compose为普通的工具函数

  src git:(master)  tree
.
├── createStore.js
├── index.js
└── utils
    ├── applyMiddleware.js
    ├── bindActionCreators.js
    ├── combineReducers.js
    ├── compose.js
    ├── isPlainObject.js
    ├── mapValues.js
    └── pick.js

源码解析：index.js

超级简单，暴露了几个核心API，没了

mport createStore from './createStore';
import combineReducers from './utils/combineReducers'; import bindActionCreators from './utils/bindActionCreators'; import applyMiddleware from './utils/applyMiddleware'; import compose from './utils/compose'; export { createStore, combineReducers, bindActionCreators, applyMiddleware, compose };

源码解析：createStore.js

直接贴上源代码，并进行简单注解。看下redux.createStore(reducer, initialState)调用的文档说明，基本就能够看懂下面代码了。

特别强调：虽然在几个文件里，createStore.js的代码行数是最多的，但却是最容易读懂的。下面几点比较关键

redux.createStore(reducer, initialState) 传入了reducer、initialState，并返回一个store对象。
store对象对外暴露了dispatch、getState、subscribe方法
store对象通过getState() 获取内部状态
initialState为 store 的初始状态，如果不传则为undefined
store对象通过reducer来修改内部状态
store对象创建的时候，内部会主动调用dispatch({ type: ActionTypes.INIT });来对内部状态进行初始化。通过断点或者日志打印就可以看到，store对象创建的同时，reducer就会被调用进行初始化。

import isPlainObject from './utils/isPlainObject';

/**
 * 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.
 */
// 初始化的时候(redux.createStore(reducer, initialState)时),传的action.type 就是这货啦
export var 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. * * @returns {Store} A Redux store that lets you read the state, dispatch actions * and subscribe to changes. */ export default function createStore(reducer, initialState) { if (typeof reducer !== 'function') { throw new Error('Expected the reducer to be a function.'); } var currentReducer = reducer; var currentState = initialState; var listeners = []; var isDispatching = false; /** * Reads the state tree managed by the store. * * @returns {any} The current state tree of your application. */ // 这个方法没什么好讲的,返回当前的state function getState() { 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. * * @param {Function} listener A callback to be invoked on every dispatch. * @returns {Function} A function to remove this change listener. */ // 很常见的监听函数添加方式,当store.dispatch 的时候被调用 // store.subscribe(listener) 返回一个方法(unscribe),可以用来取消监听 function subscribe(listener) { listeners.push(listener); var isSubscribed = true; return function unsubscribe() { if (!isSubscribed) { return; } isSubscribed = false; var index = listeners.indexOf(listener); listeners.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). */ // 以下情况会报错 // 1. 传入的action不是一个对象 // 2. 传入的action是个对象,但是action.type 是undefined function dispatch(action) { if (!isPlainObject(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 设置为 reducer(currentState, action) 返回的值 currentState = currentReducer(currentState, action); } finally { isDispatching = false; } // 如果有监听函数,就顺序调用 listeners.slice().forEach(listener => 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} */ function replaceReducer(nextReducer) { currentReducer = nextReducer; 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. // // redux.createStore(reducer, initialState) 的时候, 内部会 自己调用 dispatch({ type: ActionTypes.INIT }); // 来完成state的初始化 dispatch({ type: ActionTypes.INIT }); // 返回的就是这个东东了,只有四个方法 return { dispatch, subscribe, getState, replaceReducer }; }

源码解析：combineReducers.js

redux.combineReducers(reducerMap) 的作用在于合并多个reducer函数，并返回一个新的reducer函数。因此可以看到，combineReducers 返回了一个函数，并且该函数的参数同样是state、reducer。

可以先看伪代码感受下，最终 store.getState() 返回的state，大概会是这么个样子{todos: xx, filter: xx}。简单的说，state被拆分成了两份，TodoReducer的返回值赋值给了state.todos，FilterReducer的返回值赋值给了state.filter。

function TodoReducer(state, action) {}
function FilterReducer(state, action) {} var finalReducers = redux.combineReducers({ todos: TodoReducer, filter: FilterReducer });

同样是直接上注解后的代码，记住几个关键就差不多了：

combineReducers(reducerMap) 传入一个对象，并返回一个全新的reducer。调用方式跟跟普通的reducer一样，也是传入state、action。
通过combineReducers，对 store 的状态state进行拆分，
reducerMap的key，就是 state 的key，而调用对应的reducer返回的值，则是这个key对应的值。如上面的例子，state.todos == TodoReducer(state, action)
redux.createStore(finalReducers, initialState) 调用时，同样会对 state 进行初始化。这个初始化跟通过普通的reducer进行初始化没多大区别。举例来说，如果 initialState.todos = undefined，那么 TodoReducer(state, action) 初始传入的state就是undefined；如果initialState.todos = []，那么 TodoReducer(state, action) 初始传入的state就是[];
store.dispatch(action)，finalReducers 里面，会遍历整个reducerMap，依次调用每个reducer，并将每个reducer返回的子state赋给state对应的key。

import { ActionTypes } from '../createStore';
import isPlainObject from '../utils/isPlainObject';
import mapValues from '../utils/mapValues';
import pick from '../utils/pick';

/* eslint-disable no-console */ function getUndefinedStateErrorMessage(key, action) { var actionType = action && action.type; var actionName = actionType && `"${actionType.toString()}"` || 'an action'; return ( `Reducer "${key}" returned undefined handling ${actionName}. ` + `To ignore an action, you must explicitly return the previous state.` ); } function getUnexpectedStateKeyWarningMessage(inputState, outputState, action) { var reducerKeys = Object.keys(outputState); var argumentName = action && action.type === ActionTypes.INIT ? 'initialState argument passed to createStore' : 'previous state received by the reducer'; if (reducerKeys.length === 0) { return ( 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.' ); } if (!isPlainObject(inputState)) { return ( `The ${argumentName} has unexpected type of "` + ({}).toString.call(inputState).match(/\s([a-z|A-Z]+)/)[1] + `". Expected argument to be an object with the following ` + `keys: "${reducerKeys.join('", "')}"` ); } var unexpectedKeys = Object.keys(inputState).filter( key => reducerKeys.indexOf(key) < 0 ); if (unexpectedKeys.length > 0) { return ( `Unexpected ${unexpectedKeys.length > 1 ? 'keys' : 'key'} ` + `"${unexpectedKeys.join('", "')}" found in ${argumentName}. ` + `Expected to find one of the known reducer keys instead: ` + `"${reducerKeys.join('", "')}". Unexpected keys will be ignored.` ); } } // 对reducer做合法性检测 // store = Redux.createStore(reducer, initialState) --> // currentState = initialState // currentState = currentReducer(currentState, action); // // 从调用关系,调用时机来看, store.getState() 的初始值(currentState) // 为 currentReducer(initialState, { type: ActionTypes.INIT }) // // 1. 在初始化阶段,reducer 传入的 state 值是 undefined,此时,需要返回初始state,且初始state不能为undefined // 2. 当传入不认识的 actionType 时, reducer(state, {type}) 返回的不能是undefined // 3. redux/ 这个 namespace 下的action 不应该做处理,直接返回 currentState 就行 (谁运气这么差会去用这种actionType...) function assertReducerSanity(reducers) { Object.keys(reducers).forEach(key => { var reducer = reducers[key]; var initialState = reducer(undefined, { type: ActionTypes.INIT }); if (typeof initialState === 'undefined') { throw new Error( `Reducer "${key}" returned undefined during initialization. ` + `If the state passed to the reducer is undefined, you must ` + `explicitly return the initial state. The initial state may ` + `not be undefined.` ); } var type = '@@redux/PROBE_UNKNOWN_ACTION_' + Math.random().toString(36).substring(7).split('').join('.'); if (typeof reducer(undefined, { type }) === 'undefined') { throw new Error( `Reducer "${key}" returned undefined when probed with a random type. ` + `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` + `namespace. They are considered private. Instead, you must return the ` + `current state for any unknown actions, unless it is undefined, ` + `in which case you must return the initial state, regardless of the ` + `action type. The initial state may not be undefined.` ); } }); } /** * Turns an object whose values are different reducer functions, into a single * reducer function. It will call every child reducer, and gather their results * into a single state object, whose keys correspond to the keys of the passed * reducer functions. * * @param {Object} reducers An object whose values correspond to different * reducer functions that need to be combined into one. One handy way to obtain * it is to use ES6 `import * as reducers` syntax. The reducers may never return * undefined for any action. Instead, they should return their initial state * if the state passed to them was undefined, and the current state for any * unrecognized action. * * @returns {Function} A reducer function that invokes every reducer inside the * passed object, and builds a state object with the same shape. */ export default function combineReducers(reducers) { // 返回一个对象, key => value 且value是function(其实就是过滤掉非function) var finalReducers = pick(reducers, (val) => typeof val === 'function'); var sanityError; try { // 对所有的子reducer 做一些合法性断言,如果没有出错再继续下面的处理 // 合法性断言的内容,见API注释 assertReducerSanity(finalReducers); } catch (e) { sanityError = e; } // 所有的 key: value,将value置成了undefined,费解... // 总而言之, 初始state 就是 类似 {hello: undefined, world: undefined} 的东东 // TODO 确认这里的逻辑 var defaultState = mapValues(finalReducers, () => undefined); return function combination(state = defaultState, action) { if (sanityError) { throw sanityError; } var hasChanged = false; // 这段代码,简单的说,就是循环一遍 finalState[key] = fn(reducer, key) var finalState = mapValues(finalReducers, (reducer, key) => { var previousStateForKey = state[key]; var nextStateForKey = reducer(previousStateForKey, action); if (typeof nextStateForKey === 'undefined') { // 其他一个reducer返回的是undefined,于是挂啦...抛出错误 var errorMessage = getUndefinedStateErrorMessage(key, action); throw new Error(errorMessage); } // 这段代码有些费解,从redux的设计理念上来讲,除了不认识的action type,其他情况都应该返回全新的state // 也就是说 // 1. action type 认识,返回新的state,于是这里 hasChanged 为 true // 2. action type 不认识,返回原来的state,于是这里 hasChanged 为 false // 3. 不管action type 是否认识, 在原来的state上修改,但是返回的是修改后的state(没有返回拷贝),那么,hasChanged还是为false hasChanged = hasChanged || nextStateForKey !== previousStateForKey; return nextStateForKey; }); // 开发环境中(于是记得在生产环境去掉) // 后面再研究这段代码,毕竟不是主线路... if (process.env.NODE_ENV !== 'production') { var warningMessage = getUnexpectedStateKeyWarningMessage(state, finalState, action); if (warningMessage) { console.error(warningMessage); } } return hasChanged ? finalState : state; }; }

源码解析：bindActionCreator.js

别看API注释一大堆，除去合法性检查，关键代码其实就只有几句。先看个简单例子可能方便理解一些。看完之后可能会觉得，不就是对store.dispatch 的调用进行了便捷处理嘛。。。

var addTodo = function(text){
    return { type: 'add_todo', text: text }; }; var addTodos = function(){ return { type: 'add_todos', items: Array.prototype.slice.call(arguments, 0) }; }; var reducer = function(state, action){ switch (action.type) { case 'add_todo': return state.concat(action.text); case 'add_todos': return state.concat(action.items); default: return state; } }; var store = redux.createStore(reducer, []); // 注意,关键代码在这里 var actions = redux.bindActionCreators({ addTodo: addTodo, addTodos: addTodos }, store.dispatch); console.log('state is: ' + store.getState()); store.dispatch({type: 'add_todo', text: '读书'}); store.dispatch({type: 'add_todos', items: ['阅读', '睡觉']}); console.log('state is: ' + store.getState()); // state is: 读书,阅读,睡觉 actions.addTodo('看电影'); console.log('state is: ' + store.getState()); // state is: 读书,阅读,睡觉,看电影 actions.addTodos(['刷牙', '洗澡']); console.log('state is: ' + store.getState()); // state is: 读书,阅读,睡觉,看电影,刷牙,洗澡

所以，直接看代码吧，挺简单的。

import mapValues from '../utils/mapValues';

function bindActionCreator(actionCreator, dispatch) { return (...args) => dispatch(actionCreator(...args)); } /** * 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. */ // 假设 actionCreators === {addTodo: addTodo, removeTodo: removeTodo} // 简单的来说 bindActionCreators(actionCreators, dispatch) // 最后返回的是: // { // addTodo: function(text){ // dispatch( actionCreators.addTodo(text) ); // }, // removeTodo: function(text){ // dispatch( actionCreators.removeTodo(text) ); // } // } // // 或者说 actionCreators === addTodo (addTodo 为 actionCreator) // 最后返回的是 // function() { // dispatch(actionCreators()); // } export default function bindActionCreators(actionCreators, dispatch) { if (typeof actionCreators === 'function') { return bindActionCreator(actionCreators, dispatch); } if (typeof actionCreators !== 'object' || actionCreators === null || actionCreators === undefined) { // eslint-disable-line no-eq-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"?` ); } return mapValues(actionCreators, actionCreator => bindActionCreator(actionCreator, dispatch) ); }

源码解析：applyMiddleware.js

中间件应该是redux源码里面最绕的一部分，虽然看懂后，有一种“啊~原来不过如此”的感觉，但一开始还真是看的晕头转向的，API的说明、中间件的编写、applyMiddleware的源码实现，都不是那么好理解。

在继续源码解析之前，推荐看下官方文档对于middleware的说明，链接传送门：http://camsong.github.io/redux-in-chinese/docs/advanced/Middleware.html

虽然文档死长死长，但硬着头皮看完，还是有所收获的，终于知道 applyMiddleware 的实现这么绕了。。。

例子：redux-thunk

用redux处理过异步请求的同学应该用过redux-thunk，我们来看下他的源码，奇短无比，别说你的小伙伴了，我的小伙伴都惊呆了。

export default function thunkMiddleware({ dispatch, getState }) { return next => action => typeof action === 'function' ? action(dispatch, getState) : next(action); }

翻译成ES5，是这样子滴，之后你再看其他中间件的实现，其实都大同小异，下面我们写个自定义中间件，基本就可以看出点门路来。

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = thunkMiddleware;
function thunkMiddleware(store) { var dispatch = store.dispatch; var getState = store.getState; return function (next) { return function (action) { return typeof action === 'function' ? action(dispatch, getState) : next(action); }; }; } module.exports = exports['default'];

自定义中间件：logger

先看logger的实现

    function middleware(store){
        return function(next){ return function(action){ return next(action); } } }

基本看出中间件声明的模版来了，就是下面这个样子。下面结合applyMiddleware的调用，来说明store、next、action 几个参数。

    function logger(store){
        return function(next){ return function(action){ console.log('logger: dispatching ' + action.type); var result = next(action); console.log('logger: next state ' + result); return result; } } }

applyMiddleware调用例子

完整的示例代码见本小节最后面。可以看到：

applyMiddleware 的调用方式为 applyMiddleware(...middlewares)(react.createStore)。其实这里直接先创建 store，然后applyMiddleware(...middlewares)(store) 也很容易实现相同的效果，不过作者是故意这样设计的，为了避免在同一个store上多次应用同一个middlerware（参考官方文档:尝试 #6: “单纯”地使用 Middleware ）
中间件顶层的store参数，并不是常规的store，虽然它也有 getState、dispatch 两个方法

    // 上面的store参数，其实就是这个对象
    // 其中，store 为内部的store，我们在外面 storeWithMiddleWare.dipatch的时候，内部实现是转成 store.dispatch
    // 此外，可以看到 middlewareAPI.dispatch 方法，是最终封装后的dispatch（千万注意，如果在中间件内部 调用 store.dispatch，可能导致死循环 ）
    var middlewareAPI = {
      getState: store.getState,
      // 最后面, dispatch 被覆盖, 变成包装后的 dispatch 方法 dispatch: (action) => dispatch(action) };

第二层的next函数，其实是一个“dispatch”方法。熟悉express的同学大概可以猜到它的作用。storeWithMiddleWare.dispatch(action) 的时候，会顺序进入各个中间件（按照定义时的顺序）。从当前的例子来看，大约如下，其实就是柯里化啦~：

storeWithMiddleWare.dispatch(action) --> logger(store)(next)(action) --> timer(store)(next)(action) --> store.dispatch(action)

完整的示例代码

    function reducer(state, action){
        if(typeof state==='undefined') state = []; switch(action.type){ case 'add_todo': return state.concat(action.text); default: return state; } } function addTodo(text){ return { type: 'add_todo', text: text }; } // 这里的 store，并不是 redux.createStore(reducer, initialState) 出来的 store // 而是 {getState: store.getState, dispatch: function() { store.dispatch(action); }} //  function logger(store){ //  return function(next){ return function(action){ console.log('logger: dispatching ' + action.type); var result = next(action); console.log('logger: next state ' + result); return result; } } } function timer(store){ return function(next){ return function(action){ console.log('timer: dispatching ' + action.type); var result = next(action); console.log('timer: next state ' + result); return result; } } } var createStoreWidthMiddleware = redux.applyMiddleware( logger, timer )(redux.createStore); var storeWithMiddleWare = createStoreWidthMiddleware(reducer); storeWithMiddleWare.subscribe(function(){ console.log('subscribe: state is : ' + storeWithMiddleWare.getState()); }); console.log( storeWithMiddleWare.dispatch(addTodo('reading')) );

源码解析

再次说下，建议先看下官方文档对中间件的介绍，不然可能会有点晕。

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.
 */
/*
  从调用方法 applyMiddleware(...middlewares)(Redux.createStore) 可以看出
  next 参数实际上是 Redux.createStore. 而 Redux.createStore 的调用方式为 Redux.createStore(reducer, initialState)
  所以 applyMiddleware(...middlewares)
  1. 参数: Redux.createStore
  2. 返回值:一个function, 跟 Redux.createStore 接受的参数一样

 */
export default function applyMiddleware(...middlewares) { return (next) => (reducer, initialState) => { // 内部先创建一个store (相当于直接调用 Redux.createStore(reducer, initialState)) var store = next(reducer, initialState); // 保存最初始的store.dispatch var dispatch = store.dispatch; var chain = []; var middlewareAPI = { getState: store.getState, // 最后面, dispatch 被覆盖, 变成包装后的 dispatch 方法 dispatch: (action) => dispatch(action) }; // 返回一个数组 // 贴个例子在这里做参考,redux-thunk // function thunkMiddleware(store) { // var dispatch = store.dispatch; // var getState = store.getState; // // 这里的next其实就是dispatch // return function (next) { // return function (action) { // return typeof action === 'function' ? action(dispatch, getState) : next(action); // }; // }; //} /* chain 是个数组, 参考上面的 middlleware (redux-thunk),可以看到,chain的每个元素为如下形式的function 并且, 传入的 store.getState 为原始的 store.getState,而 dispatch则是包装后的 dispatch(不是原始的store.dispatch) 似乎是为了确保, 在每个middleware里调用 dispatch(action), 最终都是 用原始的 store.dispatch(action) 避免 store.dispatch 被覆盖, 导致middleware 顺序调用的过程中, store.dispatch的值变化 --> store.dispatch 返回的值可能会有不同 违背 redux 的设计理念 这里的 next 则为 原始的 store.dispatch (见下面 compose(...chain)(store.dispatch) ) function (next) { return function (action) { } } */ chain = middlewares.map(middleware => middleware(middlewareAPI)); // compose(...chain)(store.dispatch) 返回了一个function // 伪代码如下, // function (action) { // middleware(store)(store.dispatch); // } dispatch = compose(...chain)(store.dispatch); // 从右到左, middleware1( middleware2( middleware3(dispatch) ) ) // 于是,最终调用 applyMiddleware(...middlewares)(Redux.createStore) // 返回的 store, getState,subscribe 方法都是原始的那个 store.getState, store.subscribe // 至于dispatch是封装过的 return { ...store, dispatch }; }; }

Redux系列x：源码解析

写在前面

源码解析概览

源码解析：index.js

源码解析：createStore.js

源码解析：combineReducers.js

源码解析：bindActionCreator.js

源码解析：applyMiddleware.js

例子：redux-thunk

自定义中间件：logger

applyMiddleware调用例子

完整的示例代码

源码解析

热门文章

最新文章

相关课程

相关电子书

相关实验场景

推荐镜像