Redux源码解析一 createStore.js

Redux源码解析一 createStore.js

createStore.js 代码

Redux源码解析一 createStore.js

Redux源码解析一 createStore.js 

createStore是一个方法,可以看到有三个参数

reducer:action处理函数reducer

preloadedState:初始状态state

enhancer:增强器函数,也就是我们说的中间件函数

Redux源码解析一 createStore.js

 首先是三个if判断,可以看到reducer必须是函数,preloadedState必须非函数,如果preloadedState是函数,那么第二个if判断(44行)会把它赋值给enhancer。第三个if判断(49行)执行增强器函数。

 if (typeof enhancer !== 'undefined') {
    if (typeof enhancer !== 'function') {
      throw new Error(
        `Expected the enhancer to be a function. Instead, received: '${kindOf(
          enhancer
        )}'`
      )
    }

    return enhancer(createStore)(reducer, preloadedState)
  }

1 处理中间件函数

这里 直接 return enhancer(createStore)(reducer, preloadedState)

enhancer是一个高阶函数,入参是createStore方法本省,这是一个剥洋葱模型,把函数返回结果当作下一个函数的入参,然后一步一步走下去,到最后之后  ,其实会执行createStore(reducer, preloadedState),然后再一步一步返回,最后执行58行的返回执行完毕。

2 执行 dispatch

可以看到createStore函数内部就只执行了dispatch方法之后就返回了。

dispatch({ type: ActionTypes.INIT })

Redux源码解析一 createStore.js

 dispatch方法会传入一个默认的action{type: ActionTypes.INIT}

ActionTypes.INIT是一个随机生成的字符串,具体方法自己去看,我们继续往下看。

action必须是一个对象,执行currentState = currentReducer(currentState, action) (218行)currentReducer就是createStore的入参reducer,

上一篇:二十八、常用API二


下一篇:Redux笔记合集