Redux Implement

2018-07-17 2 min read

store 的实现

通过 createStore 函数创建 store 实例，暴露 getState, dispatch, subscribe
listeners 数组存储重渲染的回调，
subscribe 返回一个取消订阅函数

JavaScript

const createStore = (reducer) => {
	let state = {}
	let listeners = []
	const getState = () => state
	const dispatch = (action) => {
		state = reducer(state, action)
		listeners.forEach(listener => listener())
	}
	const subscribe = (listener) => {
		listeners.push(listener)
		return () => {
			listerners = listeners.filter(item => item !== listerner)
		}
	}
	return {getState, dispatch, subscribe}

}

combineReducers 的实现

输入：一个分组的 reducer 函数映射对象
输出：一个 reducer 函数，对于分组 state，用相应组里的 reducer 处理

分组的映射可以用 forEach 处理，也可以用reduce 处理：根据旧状态，把每条分组 reducer 生成的分组状态逐个累加到新状态上

JavaScript

const combineReducers = (reducers) => {
	return (state ={}, action) {
		return Object.keys(reducers).reduce(
		(nextState, key) => {
			nextState[key] = reducers[key](state[key], action)
			return nextState
		}, 
		{})
	}
}