Redux源码阅读小记

Redux 源码阅读小记

工作原因需要用到 Redux，虽说平时 React 项目中并没有用到，但是保险起见还是先搞懂再说吧。

Redux 核心概念在于，项目维持一个全局的store，其中存储了大量的state，通过dispatch（发起）一个action来说明想要进行的操作，而最终通过reducer对发起的action进行处理，这一过程结束后，得到处理后的state，即对store中存储的state进行修改。

关于这样做的好处以及其他更多背景，请参考中文文档

综上，针对核心点，主要查看了createStore、dispatch、combineReducers的源码，由于一般使用时是先从combineReducers自动组合reducer开始，再进行createStore，以下按照这一顺序记录：

combineReducers

function combineReducers(reducers) {
	const reducerKeys = Object.keys(reducers);// 获取 reducers 中所有的 key 值
	const finalReducers = {}
	for (let i = 0; i < reducerKeys.length; i++){
		const key = reducerKeys[i];
		// 检查 reducer[key] 是否为函数，如果为函数则：
		finalReducers[key] = reducers[key] // 向 finalReducers 中赋值对应的 reducer 函数
	}
	//...其他一些校验操作
	return combination(state={}, action) {
		// 如果上面的校验出错则直接抛出异常
		let hasChanged = false;
		cosnt nextState = {};
		for (let i = 0; i < finalReducerKeys.length; i++){//遍历所有校验过的合法reducer
			const key = finalReducerKeys[i];
			const reducer = finanReducers[key];
			const previousStateForKey = state[key];
			const nextStateForKey = reducer(previousStateForKey, action)//传入对应的state和action，获得返回结果
			nextState[key] = nextStateForKey;
			hasChanged = hasChanged || nextStateForKey !== previousStateForKey
		}
		hasChanged = hasChanged || finalReducerKeys.length !== Object.keys(state).length
		return hasChanged ? nextState : state;//判断出有无改变，如果没有改变则返回原 state。
	}
}

createStore

// 此处的 reducer 参数即上面所生成的 reducer
function createStore(reducer, preloadedState, enhancer) {
	// 检查参数格式是否符合要求
	if (typeof enhancer !== 'undefined'){
		if(typeof enhancer !== 'function'){throw new Error("...")}
		return enhancer(createStore)(reducer, preloadedState); // 中间件处理
	}
	let currentReducer = reducer;
	let currentState = preloadedState;
	let currentListeners = [];
	let nextListeners = currentListeners;
	let isDispatching = false; // 初始化相关变量
	function getState(){return currentState;}
	function subscribe(listener){}
	function dispatch(){}
	function observable(){}
}

dispatch

function dispatch(action){
	if (!isPlainObject(action)) {} // 判断 action 是否为对象
	// 判断是否定义了 action.type 键
	// 查看是否还处于`dispatching`中，即正在执行另一个动作
	// 调用 combineReducers 后生成的 reducer 入口,传入 state 和 action
	// 循环调用注册过的监听器。。。
}