关于 Redux 中间件
Redux 的中间件是定义一个函数，对 dispatch 进行改造，在发出 action 与执行 reducer 之间添加其他功能，这是对 Redux 进行功能拓展的方式。
Redux 如何支持中间件？
applyMiddlewares()
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
var store = createStore(reducer, preloadedState, enhancer);
var dispatch = store.dispatch;
var chain = [];
var middlewareAPI = {
getState: store.getState,
dispatch: (action) => dispatch(action)
};
chain = middlewares.map(middleware => middleware(middlewareAPI));
dispatch = compose(...chain)(store.dispatch);
return {...store, dispatch}
}
}
middleware => middleware(middlewareAPI)
每个 middleware 将能访问 getState 与 dispatch，同时可以知道该 middleware 为高阶函数，执行返回一个函数
compose()
dispatch = compose(...chain)(store.dispatch);
export default function compose(...funcs) {
if (funcs.length === 0) {
return arg => arg
}
if (funcs.length === 1) {
return funcs[0]
}
const last = funcs[funcs.length - 1]
const rest = funcs.slice(0, -1)
return (...args) => rest.reduceRight((composed, f) => f(composed), last(...args))
}
(composed, f) => f(composed)
即:
middleware({getState, dispatch})(store.dispatch)
该函数为高阶函数，执行返回一个函数
分析至此，一个 middleware 函数大致为：
（{getState, dispatch}）=> (next) => (action) => {
// next 即 store.dispatch
//...在此拓展功能
action() // action, 这个action执行触发dispath??
}
Action 如何与Dispatch联系起来？
action 通过 bindActionCreator 与 dispatch 联系起来
bindActionCreator()
function bindActionCreator(actionCreator, dispatch) {
return (...args) => dispatch(actionCreator(...args))
}
(...args) => dispatch(actionCreator(...args))
由 actionCreator 可以知道 actionCreator 为高阶函数，执行返回一个函数
所以一个 action 的姿势应该为：
()=> () => {
type: "",
payload
}
举例：redux-thunk 中间件
源码：
function thunkMiddleware({ dispatch, getState }) {
return next => action =>
typeof action === 'function' ?
action(dispatch, getState) :
next(action);
}
action 怎么写？
funciton fetchSomething(){
return (dispatch, getState)=>{
fetch().then((res)=>{
disatch({
type: "FETCH_SOMETHING_DONE"
palyload
})
})
}
}
