源码如下:
createStore
export function createStore(reducer, enhancer) {
if (enhancer) {
return enhancer(createStore)(reducer)
}
let currentState = {} // 当前状态
let currentListeners = [] // 响应器(订阅功能)
function getState() {
return currentState
}
function subscribe(listener) {
currentListeners.push(listener)
}
function dispatch(action) {
currentState = reducer(currentState, action)
currentListeners.forEach(v = > v()
) //执行所有响应器
return action
}
dispatch({type: '@IMOOC/WONIU-REDUX'}) // 做初始化
return {getState, subscribe, dispatch}
}
combineReducers
let combineReducers=(renducers)=>{
//传入一个renducers管理组,返回的是一个renducer
return function(state={},action={}){
let newState={};
for(var attr in renducers){
newState[attr]=renducers[attr](state[attr],action)
}
return newState;
}
}
applyMiddleware
// 中间件增强器
export function applyMiddleware(...middlewares){
return createStore=>(...args)=>{ // 返回一个函数 => 此函数里面的函数再接受参数
// args: enhancer(createStore)(reducer) 传进去的reducer;
// 此步返回的是createStore的原始功能
const store = createStore(...args)
let dispatch = store.dispatch // 导出dispatch部分,增强的就是dispatch
const midApi = {
getState:store.getState,
dispatch:(...args)=>dispatch(...args)
}
// 中间件链,在此步执行中间件函数(传递getState和dispatch)
const middlewareChain = middlewares.map(middleware=>middleware(midApi))
//compose: 复合函数,目的是将顺序排列的中间件函数包裹起来,前一个函数包裹后一个函数
dispatch = compose(...middlewareChain)(store.dispatch)
return {
...store,
dispatch
}
}
}
compose
export function compose(...funcs){
if (funcs.length===0) {
return arg=>arg // 返回的一个函数,函数接受什么参数就返回什么参数
}
if (funcs.length===1) {
return funcs[0]
}
//reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,
// 不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当前元素值,当前索引,原数组
// 给item传递参数args,item会返回 next()函数 将返回增强的args给pre;会从外往内去执行函数;按递归去理解
return funcs.reduce((pre, item) => (...args) => pre(item(...args)))
}