人人能读懂 redux 原理剖析

// 主函数createStore// 返回一个store对象export default function createStore(reducer, preloadedState, enhancer) {  // 增强器  if (typeof enhancer !== 'undefined') {    if (typeof enhancer !== 'function') {      throw new Error('Expected the enhancer to be a function.')    }
    return enhancer(createStore)(reducer, preloadedState)  }
  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  let isDispatching = false
  // 获取最终的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.'      )    }
    return currentState  }
  // dispatch  // 参数action  function dispatch(action) {      // 校验传入的action    // action必须是个对象，否则抛出错误信息    if (!isPlainObject(action)) {      throw new Error(        'Actions must be plain objects. ' +          'Use custom middleware for async actions.'      )    }
    // 检验action对象的必要属性    // type属性是action对象必要的属性    // 如果传入的action没有type属性，则抛出错误信息    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
      // 执行传入的reducer函数      // 返回state，给currentState赋值      currentState = currentReducer(currentState, action)    } finally {        // 一个dispatch执行完，还原状态      isDispatching = false    }
    // 执行订阅函数队列    // dispatch执行的同时会一并执行订阅队列    const listeners = (currentListeners = nextListeners)    for (let i = 0; i < listeners.length; i++) {      const listener = listeners[i]      listener()    }
    // 返回action    return action  }
  // 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，做初始化  dispatch({ type: ActionTypes.INIT })
  // 返回一个store对象  return {    dispatch,    subscribe,    getState,    ...  }}
复制代码

import createStore from 'redux'
// 创建一个reducerfunction reducer(state={}, action) {    switch(action.type) {        case 'TEST':        return {            ...state,            test: 'test success'        }    }}
// 返回storeconst store = createStore(reducer, initState={})
// 执行dispatchstore.dispatch({    type: 'TEST'})
const state = store.getState() // 返回 {test: 'TEST'}
复制代码

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;复制代码

import createStore, {applyMiddleWare} from 'reduximport reduxThunk from 'redux-thunk'// 创建一个reducerfunction reducer(state={}, action) {    switch(action.type) {        case 'TEST':        return {            ...state,            test: 'test success'        }    }}// 返回store// 中间件作为applyMiddleWare的参数传入createStoreconst store = createStore(reducer, initState={},applyMiddleWare(reduxThunk))
复制代码

export default function createStore(reducer, preloadedState, enhancer) {  ...  // 增强器  // 第三个参数是enhancer，也就是我们传入的applyMiddleWare  if (typeof enhancer !== 'undefined') {    if (typeof enhancer !== 'function') {      throw new Error('Expected the enhancer to be a function.')    }
    // 在这里return了enhancer结果    // 传入了createStore,reducer,preloadedState    // 实际上是重写了createStore    return enhancer(createStore)(reducer, preloadedState)  }
  ...}复制代码

import compose from './compose'
// 传入middlewares中间件export default function applyMiddleware(...middlewares) {  // 闭包嵌套返回2个方法  return createStore => (...args) => {      // 返回store    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.'      )    }
    // 返回一个对象    // 包含getState方法和dispatch方法    const middlewareAPI = {      getState: store.getState,      dispatch: (...args) => dispatch(...args) // 返回一个全新的dispatch方法，不污染原来的dispatch    }
    // 执行中间件第一层方法    // 回顾下中间的格式：({getState, dispatch}) => next => action => next(action)    // 这里会比较绕    const chain = middlewares.map(middleware => middleware(middlewareAPI)) // 返回一个中间件的函数集合[next => action => next(action), next => action => next(action)]
    // 使用compose聚合chain函数集合    // 返回新的dispatch    dispatch = compose(...chain)(store.dispatch)
    return {      ...store,      dispatch    }  }}
复制代码

/** * 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))). */
// 传入聚合函数集合// 集合为：[next => action => next(action), next => action => next(action)]// 返回一个新的函数: (arg) => arg  export default function compose(...funcs) {  // 判断如果没有则返回一个新函数  // 可以联想一下dispatch的定义  // function dispatch(action) {      ...      return action  }  if (funcs.length === 0) {    return arg => arg  }
  // 判断如果只有一个中间件，则直接返回第一个  if (funcs.length === 1) {    return funcs[0]  }
  // 这里用了reduce函数  // 把后一个的中间件的结果当成参数传递给下一个中间件  // 函数列表的每个函数执行后返回的还是一个函数：action => next(action)  // 这个函数就是新的dispatch  // 最后返回函数：(...args) => action => args(action)  return funcs.reduce((a, b) => (...args) => a(b(...args)))}
复制代码

// 判断值是否是对象类型function isPlainObject(obj) {    if(!obj) {        reutrn false    }
    return Object.prototype.toString.call(obj) === '[object, Object]'}
export default createStore(reducer, enhancer) {    // 先判断有没有传入中间件    // 有则之间返回    if(typeof enhancer !== 'undefined') {        // 必需是个函数        // 因为需要传参        if(typeof enhancer !== 'function') {            return        }
        return enhancer(createStore)(reducer)    }
    let state = {} // 初始化state    let listeners = [] // 发布订阅函数队列
    // 定义getState 函数    function getState() {        // 直接返回state        return state    }
    // 定义dispatch 函数    function dispatch(action) {        try{            // 执行reducer, 返回state            state = reducer(state, action)        }catch(e) {            console.log('dispatch error: 'e)        } 
        // 订阅        listeners.forEach(listener => listener())
        // 返回action        return action    }
    // 定义subscribe 函数    function subscribe(listener) {        if(!listener) {            return        }
        // 必需是回掉函数        // 因为需要在dispatch里执行        if(typeof listener !== 'function') {            return        }
        Listeners.push(listener)    }
    // 返回对象：包含getState, dispatch, subscribe 三个方法    return {        getState,        dispatch,        subscribe    }}复制代码

    function compose(...funs) {        if(!funs) {            return arg => arg        }
        if(funs.length === 1) {            return funs[0]        }
        // 遍历传入函数，返回一个新函数        return funs.reduce((a,b) => (...args) => a(b(...args)))    }复制代码

import compose from './compose'
function applyMiddleWare(...middlewares) {    return createStore => reducer => {        // 先返回一个store        const store = createStore(reducer)
        // 创建middleApi        const middleApi = {            getState: store.getState,            dispatch: (...args) => store.dispatch(...args) // 返回一个新的dispatch        }
        // 注入middleApi        // 并返回函数集合        const chain = middlewares.map(middleWare => middleWare(middleApi))
        // 通过compose函数，执行所有中间件，并返回一个新的dispatch        const dispatch = compose(...chain)(store.dispatch)
        // 返回store对象        return {            getState: store.getState,            dispatch        }    }}复制代码

    function logger({getState, dispatch}) {        return function(next) {            return function(action) {                console.log('prev')                next(action)                console.log('done')            }        }    }复制代码

    import createStore from './myCreateStore'    import applyMiddleWare from './myApplyMiddleWare'    import logger from './logger'
    // 创建reducer    function reducer(state={}, action) {        switch(action.type) {            case 'TEST':            return {                ...state,                test: 'test success'            }        }    }
    // 引入中间件    const middleware = applyMiddleWare(logger)
    const store = createStore(reducer, middleware) // 返回{getState, dispatch}复制代码