Redux源码解析一 createStore.js
2022/1/14 20:05:39
本文主要是介绍Redux源码解析一 createStore.js,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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,
这篇关于Redux源码解析一 createStore.js的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略