首页 > 编程语言> 文章详细

Redux源码解析一 createStore.js

2022-01-14 19:01:03 阅读：172 来源： 互联网

标签：enhancer 函数 reducer dispatch 源码 preloadedState Redux createStore

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，

标签：enhancer,函数,reducer,dispatch,源码,preloadedState,Redux,createStore
来源： https://blog.csdn.net/qq_33715850/article/details/122496351

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Redux源码解析一 createStore.js

1 处理中间件函数

2 执行 dispatch