不一样的redux源码解读

// 这是我们平常使用时创建 store 
const store = createStore(reducers, state, enhance);

export default function createStore(reducer, preloadedState, enhancer) {
// 如果有传入合法的 enhance，则通过 enhancer 再调用一次 createStore
if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState) // 这里涉及到中间件，后面介绍 applyMiddleware 时在具体介绍
}
let currentReducer = reducer // 把 reducer 赋值给 currentReducer
let currentState = preloadedState // 把 preloadedState 赋值给 currentState
let currentListeners = [] // 初始化监听函数列表
let nextListeners = currentListeners // 监听列表的一个引用
let isDispatching = false // 是否正在 dispatch
function ensureCanMutateNextListeners() {}

function getState() {}

function subscribe(listener) {}

function dispatch(action) {}

function replaceReducer(nextReducer) {}

// 在 creatorStore 内部没有看到此方法的调用，就不讲了
function observable() {}
// 初始化 store 里的 state tree
dispatch({type: ActionTypes.INIT})

return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
}

/**
* dispath action。这是触发 state 变化的惟一途径。* @param {Object} 一个普通 (plain) 的对象，对象当中必须有 type 属性
* @returns {Object} 返回 dispatch 的 action
*/
function dispatch(action) {
// 判断 dispahch 正在运行，Reducer 在处理的时候又要执行 dispatch
if (isDispatching) {throw new Error('Reducers may not dispatch actions.')
}
try {
// 标记 dispatch 正在运行
isDispatching = true
// 执行当前 Reducer 函数返回新的 state
currentState = currentReducer(currentState, action)
} finally {isDispatching = false}
const listeners = (currentListeners = nextListeners)
// 遍历所有的监听函数
for (let i = 0; i < listeners.length; i++) {const listener = listeners[i]
listener() // 执行每一个监听函数}
return action
}

// 两个 reducer
const todos = (state = INIT.todos, action) => {// ....};
const filterStatus = (state = INIT.filterStatus, action) => {// ...}
const reducers = combineReducers({
todos,
filterStatus
});
// 这是我们平常使用时创建 store
const store = createStore(reducers, state, enhance);
下面我们来看 combineReducers 做了什么
export default function combineReducers(reducers) {
// 第一次筛选，参数 reducers 为 Object
// 筛选掉 reducers 中不是 function 的键值对
const reducerKeys = Object.keys(reducers)
const finalReducers = {}
for (let i = 0; i < reducerKeys.length; i++) {const key = reducerKeys[i]
if (typeof reducers[key] === 'function') {finalReducers[key] = reducers[key]
}
}
const finalReducerKeys = Object.keys(finalReducers)
// 二次筛选，判断 reducer 中传入的值是否合法（!== undefined）// 获取筛选完之后的所有 key
let shapeAssertionError
try {assertReducerShape(finalReducers)
} catch (e) {shapeAssertionError = e}
return function combination(state = {}, action) {
let hasChanged = false
const nextState = {}
// 遍历所有的 key 和 reducer，分别将 reducer 对应的 key 所代表的 state，代入到 reducer 中进行函数调用
for (let i = 0; i < finalReducerKeys.length; i++) {const key = finalReducerKeys[i]
const reducer = finalReducers[key]
// 这里就是 reducer function 的名称和要和 state 同名的原因，传说中的黑魔法
const previousStateForKey = state[key]
const nextStateForKey = reducer(previousStateForKey, action)
if (typeof nextStateForKey === 'undefined') {const errorMessage = getUndefinedStateErrorMessage(key, action)
throw new Error(errorMessage)
}
// 将 reducer 返回的值填入 nextState
nextState[key] = nextStateForKey
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
// 发生改变了返回新的 nextState，否则返回原先的 state
return hasChanged ? nextState : state
}
}

//action creator
var addTodo = function(text){
return {
type: 'add_todo',
text: text
};
};
function TodoReducer(state = [], action){switch (action.type) {
case 'add_todo':
return state.concat(action.text);
default:
return state;
}
};
// 通过 store.dispatch(action) 来达到修改 state 的目的
// 注意: 在 redux 里, 唯一能够修改 state 的方法, 就是通过 store.dispatch(action)
store.dispatch({type: 'add_todo', text: '读书'});// 或者下面这样
// store.dispatch(addTodo('读书'));

// 下面来看下源码
// 核心代码，并通过 apply 将 this 绑定起来
function bindActionCreator(actionCreator, dispatch) {return function() {return dispatch(actionCreator.apply(this, arguments))
}
}
export default function bindActionCreators(actionCreators, dispatch) {
// 如果 actionCreators 是一个函数，则说明只有一个 actionCreator，就直接调用 bindActionCreator
if (typeof actionCreators === 'function') {return bindActionCreator(actionCreators, dispatch)
}
// 遍历对象，然后对每个遍历项的 actionCreator 生成函数，将函数按照原来的 key 值放到一个对象中，最后返回这个对象
const keys = Object.keys(actionCreators)
const boundActionCreators = {}
for (let i = 0; i < keys.length; i++) {const key = keys[i]
const actionCreator = actionCreators[key]
if (typeof actionCreator === 'function') {boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
}
}
return boundActionCreators
}

// 最后我们回头来看一下之前调到的中间件，import thunkMiddleware from 'redux-thunk';
// 两个 reducer
const todos = (state = INIT.todos, action) => {// ....};
const filterStatus = (state = INIT.filterStatus, action) => {// ...};
const reducers = combineReducers({
todos,
filterStatus
});
// 这是我们平常使用时创建 store
const store = createStore(reducers, state, applyMiddleware(thunkMiddleware));
为了下文好理解这个放一下 redux-thunk 的源码
function createThunkMiddleware(extraArgument) {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;

export default function applyMiddleware(...middlewares) {return createStore => (...args) => {const store = createStore(...args)
let dispatch = () => {
throw new Error(
`Dispatching while constructing your middleware is not allowed. ` +
`Other middleware would not be applied to this dispatch.`
)
}
const middlewareAPI = {
getState: store.getState,
dispatch: (...args) => dispatch(...args)
}
// 每个 middleware 都以 middlewareAPI 作为参数进行注入，返回一个新的链。此时的返回值相当于调用 thunkMiddleware 返回的函数：(next) => (action) => {}，接收一个 next 作为其参数
const chain = middlewares.map(middleware => middleware(middlewareAPI))
// 并将链代入进 compose 组成一个函数的调用链
// compose(...chain) 返回形如(...args) => f(g(h(...args)))，f/g/ h 都是 chain 中的函数对象。// 在目前只有 thunkMiddleware 作为 middlewares 参数的情况下，将返回 (next) => (action) => {}
// 之后以 store.dispatch 作为参数进行注入注意这里这里的 store.dispatch 是没有被修改的 dispatch 他被传给了 next；dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
// 定义一个代码组合的方法
// 传入一些 function 作为参数，返回其链式调用的形态。例如，// compose(f, g, h) 最终返回 (...args) => f(g(h(...args)))
export default function compose(...funcs) {if (funcs.length === 0) {return arg => arg} else {const last = funcs[funcs.length - 1]
const rest = funcs.slice(0, -1)
return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}
}

// createStore.js
if (typeof enhancer !== 'undefined') {if (typeof enhancer !== 'function') {throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}