Interpretieren Sie einen Teil des Redux-Quellcodes durch ES6-Schreiben

Dieser Artikel stellt hauptsächlich die Interpretation eines Teils des Redux-Quellcodes durch ES6-Schreiben vor. Jetzt kann ich ihn mit Ihnen teilen.

Im Redux-Quellcode besteht hauptsächlich aus vier Dateien createStore,applyMiddleware,bindActionCreators,combineRedures

createStore.js

exportieren Standardfunktion createStore (Reducer, PreloadedState, Enhancer), wobei die Reducer-Funktion zum Berechnen von Regeln verwendet wird, PreloadedState der Anfangszustand ist und Enhancer (Kombinationsfunktion höherer Ordnung) zum Erweitern des Speicherobjekts verwendet wird und den erweiterten Speicher zurückgibt

createStore kapselt private Variablen durch Schließungen und der Status und andere Status im Store werden gespeichert

//Zurück zur vom Store bereitgestellten Schnittstelle

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

Wenn preloadedState eine Funktion ist und der Enhancer null ist, dann tauschen Sie die beiden aus, der Enhancer muss eine Funktion sein

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

Funktion subscribe(listener) gibt hauptsächlich eine Abmeldefunktion über den Beobachtermodus zurück. Das Abonnement wird abgeschlossen Eine Array-Warteschlange, bevor der Listener hinzugefügt oder gelöscht wird. Ein Abonnement-Snapshot wird gespeichert.

In der Funktion „Dispatch(Aktion)“

//Markierung, dass der Versand ausgeführt wird

isDispatching = true

//Führen Sie die aktuelle Reducer-Funktion aus, um den neuen Status zurückzugeben

currentState = currentReducer(currentState, action)

Dann alle Abonnement-Array-Warteschlangen durchlaufen

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

applyMiddleware

eine Funktion zurückgeben, die die createStore-Methode als Parameter akzeptieren und die Dispatch-Methode des zurückgegebenen Speichers erneut umschließen kann

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

Aktion und Versand binden:

bindActionCreators(actionCreators, distribution)

// 判断 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

Holen Sie sich das von CombineReduces übergebene Objekt und erhalten Sie das finalReducerKeys Menge aller Schlüssel des Objekts.

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

Rufen Sie die Statussammlung ab, durchlaufen Sie die Reduzierersammlung, um den Status in den aktuellen Reduzierern zu finden, und vergleichen Sie ihn dann mit dem neuen Status, der nach dem Reduzierer erhalten wird, und geben Sie den Status zurück.

//循环遍历 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

Das ist alles. Ich hoffe, dass es für alle beim Lernen hilfreich ist. Weitere verwandte Inhalte finden Sie auf der PHP-Chinese-Website!

Verwandte Empfehlungen:

Dieses Objekt in Javascript

Ähnlichkeiten und Unterschiede zwischen foreach, for in, for of

Grundlegende Einführung in React-Reflux

Das obige ist der detaillierte Inhalt vonInterpretieren Sie einen Teil des Redux-Quellcodes durch ES6-Schreiben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!