Interpréter une partie du code source Redux via l'écriture ES6

Cet article présente principalement l'interprétation d'une partie du code source de Redux via l'écriture ES6. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer. Code source Redux, il y a principalement quatre fichiers

createStore,applyMiddleware,bindActionCreators,combineRedurescreateStore.js

export fonction par défaut createStore (reducer, preloadedState, Enhancer), où la fonction de réduction est utilisée pour calculer les règles, preloadedState est l'état initial et l'enhancer (fonction de combinaison d'ordre élevé) est utilisé pour améliorer l'objet de magasin, renvoyant le magasin amélioré createStore encapsulera les variables privées via les fermetures, et l'état et les autres états du magasin seront enregistrés

//Retour à l'interface exposée par le magasin

Si preloadedState est une fonction et que l'amplificateur est nul, alors échangez les deux, l'amplificateur doit être une fonction

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

la fonction Subscribe(listener) renvoie principalement une fonction de désabonnement via le mode observateur, et l'abonnement est complété via une file d'attente de tableau. Ajouter Ou un instantané d'abonnement sera enregistré avant d'annuler l'écoute

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

Dans la fonction dispatch(action),

//Mark dispatch est en cours d'exécution

isDispatching = true//Exécuter la fonction Réducteur actuelle pour renvoyer le nouvel état

currentState = currentReducer(currentState, action)

Ensuite, abonnez-vous à toutes les files d'attente de tableaux, parcourez

applyMiddleware

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

retournez une fonction, qui peut accepter la méthode createStore comme paramètre et encapsulez la méthode de répartition du retourné à nouveau en magasin

bindActionCreators

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
});
};

Lier l'action et l'envoi :

bindActionCreators(actionCreators, dispatch)

combineReducers

// 判断 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);
}

Récupérez l'objet transmis par combineReduces , obtenez toutes les collections de clés finalReducerKeys de l'objet.

Récupérez la collection d'états, parcourez la collection de réducteurs pour trouver l'état dans les réducteurs actuels, puis comparez-le avec le nouvel état obtenu après le réducteur. S'il y a un changement, renvoyez l'état

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

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

Recommandations associées :

Cet objet en Javascript

Similitudes et différences entre foreach, for in, for of

Introduction de base à React-Reflux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!