Redux源码分析之createStore

Redux源码分析之基本概念

Redux源码分析之createStore

Redux源码分析之bindActionCreators

Redux源码分析之combineReducers

Redux源码分析之compose

Redux源码分析之applyMiddleware

接着前面的，我们继续，打开createStore.js, 直接看最后， createStore返回的就是一个带着5个方法的对象。

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

同样的，我先删除一些不需要的代码，简化成如下, 注意看备注。（注：这里先无视中间件和enhancer,后篇再说）

export const ActionTypes = {
    INIT: '@@redux/INIT'
}
export default function createStore(reducer, preloadedState, enhancer) {
    // 初始化参数
    let currentReducer = reducer      // 整个reducer
    let currentState = preloadedState //当前的state, getState返回的值就是他，
    let currentListeners = []         // 当前的订阅，搭配 nextListeners
    let nextListeners = currentListeners  //下一次的订阅 ,搭配currentListeners
    let isDispatching = false  //是否处于 dispatch action 状态中

    // 内部方法
    function ensureCanMutateNextListeners() { }  // 确保currentListeners 和 nextListeners 是不同的引用
    function getState() { }    // 获得当前的状态，返回的就是currentState
    function subscribe(listener) { }  //订阅监听，返回一个函数，执行该函数，取消监听
    function dispatch(action) { }    // dispacth action
    function replaceReducer(nextReducer) { }  // 替换 reducer
    function observable() { }   //不知道哈哈

    //初始化state
    dispatch({ type: ActionTypes.INIT })

    //返回方法
    return {
        dispatch,
        subscribe,
        getState,
        replaceReducer,
        [$$observable]: observable
    }
}

　

ensureCanMutateNextListeners

这个方法主要用在 subscribe里面，

• 在每次订阅和取消订阅的时候，会让 nextListeners 和 currentListeners 不是同一个引用，
• 在每次 dispatch的时候，当 reducer执行完毕，订阅执行前，让 nextListeners 和 currentListeners 是一个引用

  function ensureCanMutateNextListeners() {
    if (nextListeners === currentListeners) {
      nextListeners = currentListeners.slice()
    }
  }

　　为什么这么设计，在subscribe方法上有很详细的注解，我的理解是假如订阅在执行过程中，这里说的是订阅执行过程，不是reducer执行过程

有新加的订阅添加的时候，新的订阅是不会被执行的，因为是一份拷贝

有新的订阅删除的时候，被删除的还是会执行的。

       简单说，就是新的删除和添加，下次生效。

 

getState

就是返回利用闭包存的currentState

  /**
   * Reads the state tree managed by the store.
   *
   * @returns {any} The current state tree of your application.
   */
  function getState() {
    return currentState
  }

　

 subscribe

添加订阅

• 每次添加前，如果 nextListeners 和 currentListeners 是一个引用，重新复制一个
• 并存入 nextListeners
• 返回一个函数，执行该函数取消订阅，

  function subscribe(listener) {
    if (typeof listener !== 'function') {
      throw new Error('Expected listener to be a function.')
    }

    let isSubscribed = true

    ensureCanMutateNextListeners() //复制新的
    nextListeners.push(listener)

    return function unsubscribe() {
      if (!isSubscribed) {
        return
      }

      isSubscribed = false

      ensureCanMutateNextListeners() // 复制新的
      const index = nextListeners.indexOf(listener)
      nextListeners.splice(index, 1) // 从nextListeners里面删除，下次dispatch会生效
    }
  }

dispatch

派发一个action，让reducer更新数据,下面都有注释了，为啥可说的。

• 　如果上一次派发没完毕，接着派发是会出异常的，对于单线程的js来说倒是没啥大问题

  function dispatch(action) {
    if (!isPlainObject(action)) { // action 必须是对象
      throw new Error(
        'Actions must be plain objects. ' +
        'Use custom middleware for async actions.'
      )
    }

    if (typeof action.type === 'undefined') {  // 必须有type属性
      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)
    } finally {
      isDispatching = false  //标记派发完毕
    }

    const listeners = currentListeners = nextListeners  // 让nextListeners生效
    for (let i = 0; i < listeners.length; i++) {  // 挨个执行订阅
      const listener = listeners[i]
      listener()
    }

    return action // 返回action
  }

　　

replaceReducer

 function replaceReducer(nextReducer) {
    if (typeof nextReducer !== 'function') {  // 不是函数，抛出异常
      throw new Error('Expected the nextReducer to be a function.')
    }

    currentReducer = nextReducer  // 替换reducer
    dispatch({ type: ActionTypes.INIT }) // 重新初始化
  }

　　

observable 还没啥研究，暂不说了。

最后的代码为， 

• 初始化 state

• 返回相关方法

  dispatch({ type: ActionTypes.INIT })

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

　　这里说一下 dispatch({ type: ActionTypes.INIT }) 是怎么达到初始化state的，

　　我们再回头看一下disptach中的一段代码

    try {
      isDispatching = true
      currentState = currentReducer(currentState, action)
    } finally {
      isDispatching = false
    }

      这里先讲非合成的reducer，带合成的后面说。

createStore的第一个参数为 reducer，第二个为初始化state的默认值，

• 如果你传入了第二个参数，currentState就等于你传入的值，而执行一次 dispatch的时候，系统定义的 type 为@@redux/INIT的action，你肯定是没有定义的额，看下面代码，就会直接返回state，   那么执行 currentReducer(currentState, action) 得到的结果还是 currentState
• 如果你没有传入第二个参数，在reducer的第一个参数指定了默认值，那么reducer处理type为 @@redux/INIT的action的时候，返回的就是reducer第一个参数 state的默认值，然后被赋值给了currentState
• 如果没有传入第二个参数，同时reducer的state也没指定值，那么，你的dispatch一般都会报错，因为你的state从开始就是undefined
• 如果recuder函数和createStore都设置了默认了，那么reducer的默认值是不会生效的

let todoReducer = function (state = todoList, action) {
    switch (action.type) {
        case 'add':
            return [...state, action.todo]
        case 'delete':
            return state.filter(todo => todo.id !== action.id)
        default:
            return state
    }
}

　　这里相对特别的是 合成recuder，后面再说。

　

到此为止，你只用redux的createStore方法，就能完成数据控制了，combineReducers，bindActionCreators，applyMiddleware，compose 都只是对redux的增强。

再回头看看我们第一篇提到的代码：（云淡风轻）

• 初始化的state在recuder赋值，和在createStore赋值是等价的，都赋值的话，createStore的赋值会生效。　(createStore用的是显示赋值， reducer：默认参数)　

/* 简单示例 */
let { createStore } = self.Redux

//默认state
let todoList = []
// reducer
let todoReducer = function (state, action) {
    switch (action.type) {
        case 'add':
            return [...state, action.todo]
        case 'delete':
            return state.filter(todo => todo.id !== action.id)
        default:
            return state
    }
}

//创建store
let store = createStore(todoReducer,todoList)

//订阅
function subscribe1Fn() {
    console.log(store.getState())
}
let sub = store.subscribe(subscribe1Fn)

store.dispatch({
    type: 'add',
    todo: {
        id: 1,
        content: '学习redux'
    }
})

store.dispatch({
    type: 'add',
    todo: {
        id: 2,
        content: '吃饭睡觉'
    }
})

store.dispatch({
    type: 'delete',
    id: 2
})

// 取消订阅
sub()

console.log('取消订阅后：')
store.dispatch({
    type: 'add',
    todo: {
        id: 3,
        content: '打游戏'
    }
})