Heim > Artikel > Web-Frontend > 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
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]()
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 }); };
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 === 'function') { // 调用 bindActionCreator , 返回包装后的 actionCreators , 包装后 actionCreators 可以直接 dispath boundActionCreators[key] = bindActionCreator(actionCreator, dispatch); }
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 === 'undefined') { //得到 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:
Ä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!