createStore用来创建一个store来维护state树。改变store中state的唯一方式就是调用store的dispatch()方法。一个应用应该只包含一个状态树,为了让state树的不同部分去响应action,可能需要使用combineReducers()方法将多个reducers组合成一个reducer。
createStore(reducer,preloadedState,enhancer);
返回一个redux store,包含一些方法如:dispatch()、subscribe()、getState()等。
目标文件:/node_modules/redux/src/createStore.js
版本:^4.0.1
该文件通过export default导出了一个函数——createStore。
不可以传递多个enhancer参数,只能将其组合成一个enhancer。
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是非必须参数,所以当判断到@param2、@param3都是函数或者@param3、@param4都是函数,则抛出异常。
如果@param2是函数且@param3是undefined,则对preloadedState和enhaner参数进行重置。
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState
preloadedState = undefined
}
如果enhancer不为空则必须是一个函数。
if (typeof enhancer !== 'undefined') {
if (typeof enhancer !== 'function') {
throw new Error('Expected the enhancer to be a function.')
}
return enhancer(createStore)(reducer, preloadedState)
}
if (typeof reducer !== 'function') {
throw new Error('Expected the reducer to be a function.')
}
可以看出enhancer类似这样的结构:
function enhancer(createStore) {
return function(reducer,preloadedState){
/*
*
* */
}
}
里面的匿名函数应该是返回一个包含如:dispatch()、subscribe()、getState()方法的对象,但不确定,继续。
变量初始化及参数拷贝。
let currentReducer = reducer
let currentState = preloadedState
let currentListeners = []
let nextListeners = currentListeners
let isDispatching = false
function ensureCanMutateNextListeners() {
if (nextListeners === currentListeners) {
nextListeners = currentListeners.slice()
}
}
js中对象、函数、数组等是按地址引用的,所以这里应该是为了避免地址应用导致的一些其它问题,所以做了一些赋值。
(slice方法会返回一个新的数组,不传参数可以快速生成一个副本。)
定义getState()函数,用于返回当前的state树。
/**
* Reads the state tree managed by the store.
*
* @returns {any} The current state tree of your application.
*/
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
}
reducer执行之前应该会将isDispatching置为true,这个判断将不允许在reducer内部直接调用getState()方法来获取state,避免数据不同步或死循环。
定义subscribe()监听器函数。
/**
* Adds a change listener. It will be called any time an action is dispatched,
* and some part of the state tree may potentially have changed. You may then
* call `getState()` to read the current state tree inside the callback.
*
* You may call `dispatch()` from a change listener, with the following
* caveats:
*
* 1. The subscriptions are snapshotted just before every `dispatch()` call.
* If you subscribe or unsubscribe while the listeners are being invoked, this
* will not have any effect on the `dispatch()` that is currently in progress.
* However, the next `dispatch()` call, whether nested or not, will use a more
* recent snapshot of the subscription list.
*
* 2. The listener should not expect to see all state changes, as the state
* might have been updated multiple times during a nested `dispatch()` before
* the listener is called. It is, however, guaranteed that all subscribers
* registered before the `dispatch()` started will be called with the latest
* state by the time it exits.
*
* @param {Function} listener A callback to be invoked on every dispatch.
* @returns {Function} A function to remove this change listener.
*/
function subscribe(listener) {
if (typeof listener !== 'function') {
throw new Error('Expected the listener to be a function.')
}
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)
}
}
subscribe()会接收一个回调函数作为参数,然后将该回调函数push进nextListeners中,当action派发结束后会依次执行数组nextListeners中的回调函数。
subscribe()会返回一个函数,调用该函数可以取消之前注册的回调函数。
在这个回调函数里面执行getState()方法可以获取到更新后的state树。
注释也提到:也可以在subscribe注册的回调函数中继续派发action,但不加任何判断语句直接派发action,会导致死循环,那实际这里的应用场景是什么呢?
定义dispatch()派发器函数。
/**
* Dispatches an action. It is the only way to trigger a state change.
*
* The `reducer` function, used to create the store, will be called with the
* current state tree and the given `action`. Its return value will
* be considered the **next** state of the tree, and the change listeners
* will be notified.
*
* The base implementation only supports plain object actions. If you want to
* dispatch a Promise, an Observable, a thunk, or something else, you need to
* wrap your store creating function into the corresponding middleware. For
* example, see the documentation for the `redux-thunk` package. Even the
* middleware will eventually dispatch plain object actions using this method.
*
* @param {Object} action A plain object representing “what changed”. It is
* a good idea to keep actions serializable so you can record and replay user
* sessions, or use the time travelling `redux-devtools`. An action must have
* a `type` property which may not be `undefined`. It is a good idea to use
* string constants for action types.
*
* @returns {Object} For convenience, the same action object you dispatched.
*
* Note that, if you use a custom middleware, it may wrap `dispatch()` to
* return something else (for example, a Promise you can await).
*/
function dispatch(action) {
if (!isPlainObject(action)) {
throw new Error(
'Actions must be plain objects. ' +
'Use custom middleware for async actions.'
)
}
if (typeof action.type === 'undefined') {
throw new Error(
'Actions may not have an undefined "type" property. ' +
'Have you misspelled a constant?'
)
}
if (isDispatching) {
throw new Error('Reducers may not dispatch actions.')
}
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
}
dispatch()函数接收一个action作为参数,通常这个action是一个包含type属性的纯对象。通过中间件的拓展,action可以是promise、函数,但最终传递给底层的依然是纯对象。
195行处可以看到执行reducer来计算得出新的currentState并覆盖之前的值。新的state计算结束后,遍历currentListeners并执行存放的回调函数,最后返回action本身。
定义replaceReducer()函数,顾名思义用来替换reducer。
/**
* Replaces the reducer currently used by the store to calculate the state.
*
* You might need this if your app implements code splitting and you want to
* load some of the reducers dynamically. You might also need this if you
* implement a hot reloading mechanism for Redux.
*
* @param {Function} nextReducer The reducer for the store to use instead.
* @returns {void}
*/
function replaceReducer(nextReducer) {
if (typeof nextReducer !== 'function') {
throw new Error('Expected the nextReducer to be a function.')
}
currentReducer = nextReducer
dispatch({ type: ActionTypes.REPLACE })
}
替换原来的currentReducer,并派发一个Redux私有action,这个action的type是一个随机值。
看注释,可有用来做热更新。
待定。
/**
* Interoperability point for observable/reactive libraries.
* @returns {observable} A minimal observable of state changes.
* For more information, see the observable proposal:
* https://github.com/tc39/proposal-observable
*/
function observable() {
const outerSubscribe = subscribe
return {
/**
* The minimal observable subscription method.
* @param {Object} observer Any object that can be used as an observer.
* The observer object should have a `next` method.
* @returns {subscription} An object with an `unsubscribe` method that can
* be used to unsubscribe the observable from the store, and prevent further
* emission of values from the observable.
*/
subscribe(observer) {
if (typeof observer !== 'object' || observer === null) {
throw new TypeError('Expected the observer to be an object.')
}
function observeState() {
if (observer.next) {
observer.next(getState())
}
}
observeState()
const unsubscribe = outerSubscribe(observeState)
return { unsubscribe }
},
[$$observable]() {
return this
}
}
}
暂不清楚作用是什么,似乎涉及到ES6中观察者的相关概念。
初始化state树并返回之前定义的一些函数。
// When a store is created, an "INIT" action is dispatched so that every
// reducer returns their initial state. This effectively populates
// the initial state tree.
dispatch({ type: ActionTypes.INIT })
return {
dispatch,
subscribe,
getState,
replaceReducer,
[$$observable]: observable
}
调用createStore创建store的时候会自动派发一次action,用于初始化state树。
createStore.js文件开头引用了3个模块:
纯对象(Plain Object)指 的是通过字面量形式或者new Object()形式定义的对象。先看下这个函数:
function isPlainObject(obj) {
if (typeof obj !== 'object' || obj === null) return false
let proto = obj
while (Object.getPrototypeOf(proto) !== null) {
proto = Object.getPrototypeOf(proto)
}
return Object.getPrototypeOf(obj) === proto
}
这个函数很巧妙,Object.getPrototypeOf()用于返回对象的原型,在js中数组、对象、日期、正则的typeof运算结果都是object:
console.log(typeof []);
console.log(typeof {});
console.log(typeof new Date());
console.log(typeof new RegExp());
js是基于原型链的,纯对象的原型是一个特殊对象,这个特殊对象没有原型的,处于最顶层:
({}).__proto__.__proto__ === null; // true
而Array、RegExp的实例相对于纯对象,所处原型链的位置相对较低,所以知道了这一点,那上边的函数就好理解了。
[].__proto__.__proto__.__proto__ === null; //true
new RegExp().__proto__.__proto__.__proto__ === null; //true
//或
Array.prototype.__proto__.__proto__ === null;
RegExp.prototype.__proto__.__proto__ === null;
调用createStore用来创建一个store对象,这个store暴露了4个方法:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。