Redux源码详细分析一 ———— createStore

2018-11-09

在React框架开发应用时，作为状态管理工具的Redux会经常用到，接下来的这几篇文章会从源码上逐个分析Redux中的每个Api，并结合例子帮助理解，这样可以在以后的开发中更加熟练应用。

createStore

用过Redux肯定会知道，这个Api是其最重要的一个，也是Redux的入口。下面先看一下其源码（这里省略了两个不常用到的方法），然后会每一步做了什么进行分析：

//其实就是一个函数，接收三个参数，reducer、初始状态（preloadedState）、应用的中间件（enhancer）
export default function createStore(reducer, preloadedState, enhancer) {

    //对preloadedState和enhancer进行函数校验，如果校验不通过会报出错误
    if (
        (typeof preloadedState === 'function' && typeof enhancer === 'function') ||
        (typeof enhancer === 'function' && typeof arguments[3] === 'function')
    ) {
        throw new Error(
        'It looks like you are passing several store enhancers to ' +
            'createStore(). This is not supported. Instead, compose them ' +
            'together to a single function'
        )
    }

    //如果第二个参数是function，且第三个参数为undefined，则将其交换，这也就是平时可以不写初始状态，直接写应用中间件
    if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
        enhancer = preloadedState
        preloadedState = undefined
    }

    //如果enhancer定义了，但不是function，就会报出错误，如果校验通过则执行对应的方法（这块涉及到中间件的应用，后续介绍）
    if (typeof enhancer !== 'undefined') {
        if (typeof enhancer !== 'function') {
            throw new Error('Expected the enhancer to be a function.')
        }

        return enhancer(createStore)(reducer, preloadedState)
    }

    //如果reducer不是函数，也会报出错误，这也就是平时要求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
    let isDispatching = false

    //如果nextListeners与currentListeners相等，则调用数组的slice方法，对其进行深拷贝，防止后续因为引用类型出现错误
    function ensureCanMutateNextListeners() {
        if (nextListeners === currentListeners) {
            nextListeners = currentListeners.slice()
        }
    }

    /*
        这个方法就是在开发是应用的getState方法，这里对其进行了判断，如果不是在派发的过程中，
        就会应用闭包的方式返回currentState，而currentState在上面已经赋值，正是传入的第二个参数preloadedState。
        可能会问，如果第二个参数没传，那不是undefined吗？不要着急，接着看就能明白
    */
    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
    }

    /*
        这个方法就是在开发是调用的subscribe方法，当状态发生改变的时候，它就会执行，
        它接收一个需要监听的listener，这个listener必须是个函数
    */
    function subscribe(listener) {

        //判断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追加传入的listener，这个nextListeners在后续会用到
        ensureCanMutateNextListeners()
        nextListeners.push(listener)

        //返回的这个函数的作用是在nextListeners中移除传入的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

            ensureCanMutateNextListeners()
            const index = nextListeners.indexOf(listener)
            nextListeners.splice(index, 1)
        }
    }

    /*
        这个是在开发中调用的dispatch方法，它的作用就是当需要改变状态的时候，派发dispatch进行更新，
        它接收action参数，而这个action必须是一个plain对象，也就是这样{type: 'ADD'}直接定义的对象，
        这个对象的原型必须是Object，构造函数是Object()
    */
    function dispatch(action) {

        //对action进行校验
        if (!isPlainObject(action)) {
            throw new Error(
                'Actions must be plain objects. ' +
                'Use custom middleware for async actions.'
            )
        }

        //如果action中没有type，则会报错，这也就是平时开发时需要为每个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..catch..用的比较多，而这个try...finally...的意思是当执行完try，会继续执行finally。
            首先将状态执为正在派发状态，然后调用传入的reducer方法，并将默认的状态以及action传入到reducer中，
            也就是执行平时在reducer中定义的if、switch条件判断，最后将得到的结果赋值给currentState。
            所有都执行完后，再将状态执回。
        */
        try {
            isDispatching = true
            currentState = currentReducer(currentState, action)
        } finally {
            isDispatching = false
        }

        /*
            这里就用到了上面提到的nextListeners，会遍历其中的每个listener，然后执行，
            这也就是要求listener必须是函数，同时也实现了每次dispatch时，subcribe订阅的listener都会得到更新
        */
        const listeners = (currentListeners = nextListeners)
        for (let i = 0; i < listeners.length; i++) {
            const listener = listeners[i]
            listener()
        }

        return action
    }

    /*
        这个dispatch非常重要，在createStore时会默认派发一次dispatch，
        而传入的这个action.type是随机生成的（下面是随机生成的代码），
        执行这个dispatch就是为了获取在定义reducer时传入的默认state，
        因为在写reducer时，不管是用if还是用switch，都需要写不符合所有条件的默认返回值，
        而这个返回值就是定义的初始状态。这样在调用getState方法时，就可以得到初始状态。

        如果没有传入preloadedState，那刚开始currentState就是undefined，而派发了这次dispatch就可以对其重新赋值，
        也就回答了上面如果第二参数为undefined的问题
    */
    /*
        const randomString = () =>
            Math.random()
            .toString(36)
            .substring(7)
            .split('')
            .join('.')
        const ActionTypes = {
            INIT: `@@redux/INIT${randomString()}`,
            REPLACE: `@@redux/REPLACE${randomString()}`,
            PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
        }
    */
    dispatch({ type: ActionTypes.INIT })

    return {
        dispatch,
        subscribe,
        getState
    }
}

从上面逐条代码的分析可以看出，redux的createStore内部实现原理其实并不复杂，将状态同一进行管理，当需要改变的时候，必须派发更新操作，也就是dispatch(action)，而不可以直接对state进行赋值。

在React中应用Redux实例：

分析完源码，下面结合具体例子来说明一下（部分地方省略）：

//store.js

export const increment = () => ({ type: 'INCREMENT' }) 

const initialState = { num: 1 }

const numReducer = (state=initialState, action) => {
    switch(action.type){
        case 'INCREMENT':
            return { ...state, num: state.num+1 }
        default:
            return state
    }
}

//这里面的initialState可不传，上面的分析可以知道，会默认派发一次action，所以还是可以得到这里的initialState
export const numStore = createStore(numReducer, initialState)

//App.js

class App extends React.Component {
    constructor(props){
        super(props)

        //应用getState获取初始state，因为在createStore中默认派发一次action，得到reducer中默认返回的初始状态
        this.state = numStore.getState()

        //监听handleChange方法，将handleChange放入nextListeners中，当有dispatch(action)时执行handleChange
        numStore.subscribe(this.handleChange)
    }

    handleChange = () => {

        //调用setState改变state
        this.setState(numStore.getState())
    }

    render(){
        const { num } = this.state
        return (
            <div>
                <p>{ num }</p>

                /*
                    点击按钮，派发之前定义的action，得到变化后的state，同时触发订阅的handleChange方法，
                    改变当前的state，最后重新执行render方法，渲染页面
                */
                <button onClick={ () => dispatch(increment()) }>increment</button>
            <div>
        )
    }
}

通过一个简单的例子并结合上面的源码分析，可以清晰的知道Redux内部具体做了什么，其实再复杂的项目，内部Redux的实现都是一样的，都是像上面分析的一样。