实现redux核心功能（createStore, applyMiddleware, combineReducers）
内部关系图
redux.png
开始之前，需要了解几个概念
-
store
store是通过createStore创建的仓库,主要提供三个方法：
getState：获取state
dispatch：接收action，然后通过reducer处理state
subscribe：注册监听器 -
state
存储在store里面的数据，只能通过getState获取 -
action
一个对象，表示一种行为。reducer根据action处理state -
reducer
用户定义的用来处理state的函数。规定了固定接收state，action。以及return最新的state -
dispatch
接收action，触发reducer
createStore初现
createStore接收reducer（必传），初始的state（可选），enhancer（插件，可选），返回一个store
function createStore(reducer, state = '', enhancer) {
...
return {
getState,
dispatch,
subcribe
}
}
我们内部需要初始化state，linstener(用来存储监听器的列表)
let state = '';
let listener = [];
getState方法返回state
const getState = () => state;
subscribe方法接收函数，注册监听器。并且返回用来销毁监听器的函数
const subscribe = (fn) => {
if (listener.indexOf(fn) === -1) listener.push(fn);
return () => listener.filter(i => i !== fn);
}
dispatch方法接收action，调用reducer，拿到最新state并且更新,当state更新时，触发监听器列表执行
const dispatch = (action) => {
const newState = reducer(state, action);
state = newState;
listener.forEach(i => i(newState))
}
完整的createStore
function createStore(reducer, _state, enhancer) {
let state = _state ?? '';
// 这段处理中间件，讲applyMiddleware会涉及
if (enhancer) return enhancer(createStore)(reducer, state);
const listener = [];
const getState = () => state;
const subscribe = (fn) => {
if (listener.indexOf(fn) === -1) listener.push(fn);
return () => listener.filter(i => i !== fn);
}
const dispatch = (action) => {
const newState = reducer(state, action);
state = newState;
listener.forEach(i => i(newState))
}
return {
getState,
dispatch,
subcribe
}
}
applyMiddleware初现
使用方法：
createStore(reducer, _state, applyMiddleware(thunk, saga))
applyMiddleware可接收多个中间件函数，通过createStore里面这段函数
if (enhancer) return enhancer(createStore)(reducer, state);
能知道的有2点：
1.当存在中间件的时候，触发enhancer并且返回其结果。所以applyMiddleware最终返回也是一个store
2.applyMiddleware是一个HOC函数，而且观察可知其执行了3次，才把store return出去
所以：
const applyMiddleware = (...middlewares) => {
return (createStore) => {
return (reducer, state) => {
return store;
}
}
}
上述可知applyMiddleware函数接收了createStore,也接收了reducer和state。
因此我们可以通过这3个参数创建store
const store = createStore(reducer, state);
重点来了，直接上完整代码
const applyMiddleware = (...middlewares) => (createStore) => (reducer, state) => {
const store = createStore(reducer, state);
let dispatch = undefined;
let getState = store.getState;
const midApi = {
getState,
dispatch: (...res) => dispatch(...res),
};
const middlewaresChain = middlewares.map(mid => mid(midApi));
dispatch = compose(...middlewaresChain)(store.dispatch);
}
const compose = (...mids) => {
if (mids.length === 0) {
return args => args;
}
if (mids.length === 1) {
return mids[0]
}
return mids.reduce((l, r) => (...args) => l(r(...args)));
}
首先
我们需要了解，作者把中间件的格式固定好了为：
const middleware = ({ dispatch, getState }) => (next) => (action) => {}
中间件（middleware）通过applyMiddleware这个方法，传入了参数(dispatch, getState, next)
const midApi = {
getState,
dispatch: (...res) => dispatch(...res),
};
const middlewaresChain = middlewares.map(mid => mid(midApi));
这里middlewaresChain得到的是执行完之后的中间件插件列表，对应的是每个中间件得到了dispatch、getState。
dispatch = compose(...middlewaresChain)(store.dispatch);
compose是把插件组合成
(...arg) => f1(f2(f3(...arg)))
这种形式，从右往左的返回结果作为前一个的入参
compose执行之后的得到的
dispatch = (...arg) => f1(f2(f3(...arg)))(store.dispatch)
传入store.dispatch执行，结合中间件的格式来看，f1的返回结果是一个函数，缓存了一个next，这个f1的next就是f2的返回也是一个函数，缓存了一个next，这个f2的next就是f3的返回结果，而f3的返回结果也是个函数，缓存了一个next，而store.dispatch就是f3的入参next，最后dispatch就等于f1()的执行结果（函数），接收action。
combineReducers
在大中型项目中，操作比较复杂，数据结构也比较复杂，因此，需要对reducer进行细分。redux提供了方法，可以帮助我们更加方便的合并reducer，combineReducers会合并reducer，得到一个新的reducer，该新的reducer管理一个对象，该对象中的每一个属性交给对应的reducer管理。
代码很简单，组装reducers，返回一个reducer，数据使用一个对象表示，对象的属性名与传递的参数对象保持一致
const combineReducers = reducers => {
return (state = {}, action) => {
for (let key in reducers) {
if (reducers.hasOwnProperty(key)) {
const reducer = reducers[key];
state[key] = reducer(state[key], action);
}
}
return state;
}
}
附上完整代码
const createStore = (reducer, preloadedState, enhancer) => {
let state;
// 判断不传初始state的情况
if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') {
state = undefined;;
enhancer = preloadedState;
} else {
state = preloadedState;
}
if (enhancer) {
return enhancer(createStore)(reducer, state);
}
let listener = [];
const dispatch = (action) => {
const newState = reducer(state, action);
state = newState;
listener.forEach(listen => listen());
};
const subscribe = fn => {
if (listener.indexOf(fn) === -1) listener.push(fn);
return () => listener = listener.filter(i => i !== fn);
};
return {
getState: () => state,
subscribe,
dispatch
};
};
const applyMiddleware = (...middlewares) => (createStore) => (reducer, state) => {
const store = createStore(reducer, state);
let dispatch = undefined;
const midApi = {
getState: store.getState,
dispatch: (...rs) => {
return dispatch(...rs)
},
}
// 每一个中间件都接收 getState 和 dispatch 方法
const middlewareChain = middlewares.map((mid) => mid(midApi));
// 将中间件组合成一个函数进行调用
dispatch = compose(middlewareChain)(store.dispatch);
return {
...store,
dispatch
};
};
var compose = (mid) => {
// 如果没有中间件，直接返回参数(dispatch)
if (mid.length === 0) return args => args
// 如果只有一个中间件，则直接返回
if (mid.length === 1) return mid[0]
// 将中间件聚合成 (...arg) => f1(f2(f3(...args)) 形式并返回
return mid.reduce((l, r) => (...args) => l(r(...args)));
};
const combineReducers = reducers => {
return (state = {}, action) => {
for (let key in reducers) {
if (reducers.hasOwnProperty(key)) {
const reducer = reducers[key];
state[key] = reducer(state[key], action);
}
}
return state;
}
}
附件
附上redux-thunk的实现源码，助于理解redux
export default ({ getState, dispatch }) => (next) => (action) => {
if (typeof action === 'function') {
return action(dispatch, getState);
} else {
return next(action);
}
};
