Redux源码解析一 createStore.js

互联网 2022/1/14 20:05:39

createStore.js 代码 createStore是一个方法,可以看到有三个参数 reducer:action处理函数reducer preloadedState:初始状态state enhancer:增强器函数,也就是我们说的中间件函数 首先是三个if判断,可以看到reducer必须是函数,preloadedState必须非函数,如果prelo…

createStore.js 代码

 

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

reducer:action处理函数reducer

preloadedState:初始状态state

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

 首先是三个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 })

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

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

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

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[Redux源码解析一 createStore.js]http://www.zyiz.net/tech/detail-285165.html

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程