middleware
redux middlewarwe middleware 提供了一个分类处理 action 的机会，在 middleware 中你可以检阅每一个流过的 action，挑选出特定类型的** action 进行相应操作，给你一次改变 action **的机会。
它提供了位于action被发起之后，reducer到达之前的扩展点。
为什么需要middleware
redux数据流
上图表示的是redux中简单的同步数据流的过程，在view界面触发一个事件后，在后调中dispatch一个action，reducer收到action，更新state并通知view更新。但是如果处理异步action操作 ，这样的方法就不是很好的，单纯的修改 dispatch 或 reducer 的代码显然不具有普世性，我们需要的是可以组合的，自由插拔的插件机制，这一点 redux 借鉴了 koa** 里中间件的思想，koa 是用于构建 web 应用的 NodeJS 框架。另外 reducer 更关心的是数据的转化逻辑，所以 redux 的 middleware 是为了增强 dispatch 而出现的。
redux的middleware用reduceRight方法，将applyMiddleware
方法中的参数串起来，原始的dispatch方法会最后执行。
applyMiddleware的源码及分析
export default function applyMiddleware(...middlewares) {
/**
* 返回值是一个函数，因此在使用的时候是如下形式：
* var store = applyMiddleware(...midlewares)(createStore)(reducer)
*/
return (createStore) => (reducer, initialState, enhancer) => {
// 普通方式创建的store
var store = createStore(reducer, initialState, enhancer)
var dispatch = store.dispatch
var chain = []
/**
* 将store的一部分接口暴露给中间件
* 在编写中间件的时候，通常形式为：
* function middleware(store){
* return next => action => { ... }
* }
* 参数的store其实就是middlewareAPI
*/
var middlewareAPI = {
getState: store.getState,
/**
* 这里之所以使用一个匿名函数，而不是`dispatch： dispatch`的形式
* 是因为在中间件中执行store.dispatch的时候，dispatch的值已经改变
* 在下面的代码中将会看到dispatch被重新赋值
*/
dispatch: (action) => dispatch(action)
}
/**
* chain是一个数组，数组中的每一项都是一个具有如下形式的函数：
* function(next){
* return function(action){ ... }
* }
*/
chain = middlewares.map(middleware => middleware(middlewareAPI))
/**
* 假设chain为[mw1, mw2, mw3]
* 那么此时dispatch为mw1(mw2(mw3(store.dispatch)))
* 即store.dispatch作为mw3的next参数
* mw3(store.dispatch)作为mw2的next参数，以此类推
* 最终的返回值是一个函数，其形式为：
* function(action){ ... }
* 该函数作为新的dispatch（或者说，包装后的dispatch）
*/
dispatch = compose(...chain)(store.dispatch)
return {
...store,
dispatch
}
}
}
编写middleware
如果需要自定义middleware也很简单，这个middleware只接收一个action，执行后也需要返回一个action；如果需要执行下一步，调用next(action)即可。
基本使用方式：
store => next => action{
if(action.type === ''){ //找到对应的action.type的名称执行下面的代码
}else{
next(action); //next指向下一个要执行的action
}
}
在项目中使用的具体示例：
//postMessage.js
export default store => next => action =>{
if(action.type === "POSTMESSAGE"){
request.post('/postMessage')
.send({userName:action.data.user,goodName:action.data.name,description:action.data.description,
price:action.data.price,count:action.data.count,telephoneNumber:action.data.telephoneNumber})
.end((err,res)=>{
next({type:"POSTMESSAGE",isSaved:res.body});
})
}else{
next(action);
}
}
//将middleware导出之后，在main函数中调用，通过applyMiddleware将所有的middleware串起来。
//main.js
import React from 'react';
import {render} from "react-dom";
import {createStore, applyMiddleware} from 'redux';
import {Provider} from "react-redux";
import PostMessage from './containers/postMessage';
const createStoreWithMiddleware = applyMiddleware(ResgierMiddleware,LoginMiddleware,NavMiddleware,PostMessageMiddleware)(createStore);
