Redux之浅析中间件（八）
# 一、前言
- 在
redux里，middleware是发送action和action到达reducer之间的第三方扩展，也就是中间层。也可以这样说，middleware是架在action和store之间的一座桥梁 - 在
redux里，action仅仅是携带了数据的普通js对象
Reducer拆分可以使组件获取其最小属性(state)，而不需要整个Store。中间件则可以在Action Creator返回最终可供dispatch调用的action之前处理各种事情，如异步API调用、日志记录等，是扩展Redux功能的一种推荐方式
Redux提供了applyMiddleware(...middlewares)来将中间件应用到createStore。applyMiddleware会返回一个函数，该函数接收原来的creatStore作为参数，返回一个应用了middlewares的增强后的creatStore
export default function applyMiddleware(...middlewares) {
return (createStore) => (reducer, preloadedState, enhancer) => {
//接收createStore参数
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)
//返回经middlewares增强后的createStore
return {
...store,
dispatch
}
}
}
@前端进阶之旅: 代码已经复制到剪贴板
未应用中间价之前，创建
store的方式如下
import {createStore} from 'redux';
import reducers from './reducers/index';
export let store = createStore(reducers);
@前端进阶之旅: 代码已经复制到剪贴板
应用中间价之后，创建
store的方式如下
import {createStore，applyMiddleware} from 'redux';
import reducers from './reducers/index';
let createStoreW
