ES6 작성을 통해 일부 Redux 소스 코드 해석

이 글은 주로 ES6 작성을 통해 Redux 소스 코드의 일부를 해석하는 방법을 소개합니다. 이는 일정한 참조 가치가 있습니다. 이제는 필요한 친구들이 참조할 수 있습니다.

Redux 소스에는 주로 4개의 파일이 있습니다. codecreateStore , applyMiddleware, binActionCreators, CombineRedures

createStore.js

export 기본 함수 createStore(reducer, preloadedState, Enhancer), 여기서 Reducer 함수는 규칙을 계산하는 데 사용되며 preloadedState는 초기 상태, Enhancer (고차 조합 함수) store 객체를 강화하고 강화된 store를 반환하는 데 사용됩니다

createStore는 클로저를 통해 개인 변수를 캡슐화하고 store의 상태 및 기타 상태는 저장됩니다

//Return to 스토어의 노출된 인터페이스

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

preloadedState가 함수이고 Enhancer가 null인 경우 둘을 교환하고 Enhancer는 함수여야 합니다.

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

함수 subscribe(listener)는 주로 관찰자 모드를 통해 구독 취소 함수를 반환합니다. Add 또는 청취를 취소하기 전에 구독 스냅샷이 저장됩니다

함수 디스패치(action)에서

//Mark 디스패치가 실행 중입니다

isDispatching = true

//현재 실행 Reducer 함수를 사용하여 새 상태를 반환

currentState = 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>

상태 컬렉션을 가져오고, 리듀서 컬렉션을 순회하여 현재 리듀서의 상태를 찾은 다음 리듀서 이후에 얻은 새 상태와 비교합니다. 변경 사항이 있으면 상태를 반환합니다

//循环遍历 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 중국어 웹사이트를 주목해주세요!

관련 권장사항:

Javascript의 this 객체

foreach, for in, for of

Reflux 기본 소개

의 유사점과 차이점

위 내용은 ES6 작성을 통해 일부 Redux 소스 코드 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!