目录结构
image.png工具类
actionTypes
isPlainObject
waring
src
createStore.js:
先看看createStore方法
export default function createStore(reducer, preloadedState, enhancer) {……}
用法举例:const store=Redux.createStore(reducers);
第一步:参数校验
期望:reducer、enhancer是一个function、preloadedState是个对象
//一、如果preloadedState是个function或者多输了一个参数,报错
if (
(typeof preloadedState === 'function' && typeof enhancer === 'function') ||
(typeof enhancer === 'function' && typeof arguments[3] === 'function')
) {
throw new Error(
'It looks like you are passing several store enhancers to ' +
'createStore(). This is not supported. Instead, compose them ' +
'together to a single function'
)
}
//二、如果preloadedState是个function,且第三个参数enhancer未输入,则将第二个参数当作第三个参数使用
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
//如果第三个参数enhancer输入,但是不是个函数,报错,如果是函数,返回enhancer的闭包调用的结果。
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}
//如果reducer不是个函数,报错
if (typeof reducer !== 'function') {
throw new Error('Expected the reducer to be a function.')
}
怎么样,看起来是不是很简单!
第二步:变量的声明与设置
let currentReducer = reducer
let currentState = preloadedState
let currentListeners = []
let nextListeners = currentListeners
let isDispatching = false
第三步:声明方法
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
dispatch:
function dispatch(action) {
//判断参数action是否是纯函数,不是报错
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
//判断action.type 是否存在,不是报错
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
//判断当前是否有执行其他的reducer操作
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
//执行
//设置isDispatching为true,防止后续的action进来触发reducer操作
//根据action触发状态更新
try {
isDispatching = true
currentState = currentReducer(currentState, action)
} finally {
isDispatching = false
}
//当前状态设置完毕后,执行监听函数
const listeners = (currentListeners = nextListeners)
for (let i = 0; i < listeners.length; i++) {
const listener = listeners[i]
listener()
}
//返回参数
return action
}
replaceReducer
参数校验 判断参数nextReducer是不是function
触发state更新操作
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.')
}
currentReducer = nextReducer
dispatch({ type: ActionTypes.REPLACE })
}
getState
获取当前状态
function getState() {
if (isDispatching) {
throw new Error(
'You may not call store.getState() while the reducer is executing. ' +
'The reducer has already received the state as an argument. ' +
'Pass it down from the top reducer instead of reading it from the store.'
)
}
return currentState
}
subscribe
function subscribe(listener) {
//参数校验
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}
//如果reducer正在执行,报错
if (isDispatching) {
throw new Error(
'You may not call store.subscribe() while the reducer is executing. ' +
'If you would like to be notified after the store has been updated, subscribe from a ' +
'component and invoke store.getState() in the callback to access the latest state. ' +
'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
)
}
let isSubscribed = true
ensureCanMutateNextListeners()
nextListeners.push(listener)
return function unsubscribe() {
if (!isSubscribed) {
return
}
if (isDispatching) {
throw new Error(
'You may not unsubscribe from a store listener while the reducer is executing. ' +
'See https://redux.js.org/api-reference/store#subscribe(listener) for more details.'
)
}
isSubscribed = false
ensureCanMutateNextListeners()
const index = nextListeners.indexOf(listener)
nextListeners.splice(index, 1)
}
}
网友评论