ES6 の書き込みを通じて Redux ソース コードの一部を解釈する

この記事では、ES6 の記述を通じて Redux ソース コードの一部を解釈する方法を主に紹介します。必要な友人に参考にしていただけるように共有します。Redux ソースには主に 4 つのファイルがあります。 code

createStore、applyMiddleware、bindActionCreators、combineRedurescreateStore.js

export デフォルト関数 createStore(reducer, preloadedState,Enhancer)。ここで、Reducer 関数はルールの計算に使用されます。preloadedState は初期状態、enhancer (高次結合関数) ストア オブジェクトを拡張し、拡張されたストアを返すために使用されますcreateStore はクロージャを通じてプライベート変数をカプセル化し、ストア内の状態およびその他の状態が保存されます

//Return toストアの公開インターフェース

return {
dispatch, //唯一一个可以改变 state 的哈按时
subscribe, //订阅一个状态改变后，要触发的监听函数
getState, // 获取 store 里的 state
replaceReducer, //Redux热加载的时候可以替换 Reducer
[$$observable]: observable //对象的私有属性，供内部使用
}

preloadedStateが関数でエンハンサーがnullの場合、その2つを交換し、エンハンサーは関数である必要があります

if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
enhancer = preloadedState // 把 preloadedState 赋值给 enhancer
preloadedState = undefined // 把 preloadedState 赋值为 undefined
}

関数subscribe(listener)は主にオブザーバーモードを通じてサブスクリプション解除関数を返します サブスクリプションが完了します。配列キューを介して追加 または、リスニングをキャンセルする前にサブスクリプションのスナップショットが保存されます

関数dispatch(action)では、

//ディスパッチが実行中であることをマークします

isDispatching = true//現在のものを実行しますReducer関数を実行し、新しい状態を返します

currentState = currentReducer(currentReducer(currentState, action))

次に、すべてのサブスクリプション配列キューを走査します

//所有的的监听函数赋值给 listeners
var listeners = currentListeners = nextListeners
 
//遍历所有的监听函数
for (var i = 0; i < listeners.length; i++) {
 
// 执行每一个监听函数
listeners[i]()

applyMiddleware

createStoreメソッドをパラメータとして受け入れ、ディスパッチメソッドをラップできる関数を返します

返されたストアを再度

return function (reducer, preloadedState, enhancer) {
var store = createStore(reducer, preloadedState, enhancer);
var _dispatch = store.dispatch; //获取dispatch
var chain = [];
 
var middlewareAPI = {
getState: store.getState,
dispatch: function dispatch(action) {
return _dispatch(action);
}
};
chain = middlewares.map(function (middleware) { //遍历middlewares绑定
return middleware(middlewareAPI);
});
_dispatch = compose.apply(undefined, chain)(store.dispatch);
 
return _extends({}, store, {
dispatch: _dispatch
});
};

bindActionCreators

バインドアクションとディスパッチ:

bindActionCreators(actionCreators,dispatch)

// 判断 actionCreators 是一个函数
if (typeof actionCreators === 'function') {
// 调用 bindActionCreator ， 返回包装后的 actionCreators , 包装后 actionCreators 可以直接 dispath
return bindActionCreator(actionCreators, dispatch);
}
如果是Object对象的话，遍历Object的key,获取Oobject每个key对应的value
// 获取 actionCreators 所有的 key
var keys = Object.keys(actionCreators);
// 用来保存新 转换后的 actionCreators
var boundActionCreators = {};
 
// 遍历 所有的 actionCreators keys
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
// 获取当前的 actionCreator
var actionCreator = actionCreators[key];
// 当前的 actionCreator 是一个函数
if (typeof actionCreator === &#39;function&#39;) {
// 调用 bindActionCreator ， 返回包装后的 actionCreators , 包装后 actionCreators 可以直接 dispath
boundActionCreators[key] = bindActionCreator(actionCreator, dispatch);
}

combineReducers

combineReducesによって渡されたオブジェクトを取得し、オブジェクトのすべてのキーのfinalReducerKeysセットを取得します。

<Provider store={store}>
</Provider>

状態コレクションを取得し、reducersコレクションを走査して現在のreducerの状態を見つけ、それをreducerの後に取得した新しい状態と比較し、変化があれば状態を返します

//循环遍历 finalReducerKeys ,执行所有的 reducer, 所以大家一定不要有相同的 action.type ,否则你的状态一定会混乱的
for (var i = 0; i < finalReducerKeys.length; i++) {
//获取当前的 key
var key = finalReducerKeys[i]
//获取当前 reducer
var reducer = finalReducers[key]
//获取当前 key 的 state
var previousStateForKey = state[key]
//执行 reducer ，获取 state
var nextStateForKey = reducer(previousStateForKey, action)
//判断执行完Reducer后, 返回回来的 nextStateForKey 是 undefined
if (typeof nextStateForKey === &#39;undefined&#39;) {
//得到 Undefined 状态的错误消息
var errorMessage = getUndefinedStateErrorMessage(key, action)
//抛出异常
throw new Error(errorMessage)
}
//赋值给 nextState
nextState[key] = nextStateForKey
//判断 state 是否经过 Reducer 改变了
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
}
//返回state
return hasChanged ? nextState : state

上記は、この記事の内容全体が皆様のお役に立てれば幸いです。学習が役立つ場合は、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

JavaScript の this オブジェクト

foreach、for in、for of の類似点と相違点

React-Reflux の基本的な紹介

以上がES6 の書き込みを通じて Redux ソース コードの一部を解釈するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。