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-09-28基于Python+Vue开发的口腔牙科预约管理系统
- 2024-09-28基于Python+Vue开发的酒店客房预订管理系统
- 2024-09-27使用js将ETH账户的资产打散其他账户web3
- 2024-09-27我轻松地将我的 React.js 应用程序翻译成了多种语言。下面是我是如何做到的... ??
- 2024-09-27?? 使用 useMemo 和 useCallback 加速 React:告别缓慢的重新渲染!??
- 2024-09-27Vue CLI多环境配置教程:新手入门指南
- 2024-09-27Vue CLI多环境配置教程:快速入门指南
- 2024-09-27Vue CLI教程:新手入门指南
- 2024-09-27Vue CLI教程:初学者快速入门指南
- 2024-09-27Vue3公共组件教程:入门与实践