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-11-16Vue3资料:新手入门必读教程
- 2024-11-16Vue3资料:新手入门全面指南
- 2024-11-16Vue资料:新手入门完全指南
- 2024-11-16Vue项目实战:新手入门指南
- 2024-11-16React Hooks之useEffect案例详解
- 2024-11-16useRef案例详解:React中的useRef使用教程
- 2024-11-16React Hooks之useState案例详解
- 2024-11-16Vue入门指南:从零开始搭建第一个Vue项目
- 2024-11-16Vue3学习:新手入门教程与实践指南
- 2024-11-16Vue3学习:从入门到初级实战教程