Redux中间件与异步

了解中间件，并会使用，再到自己手动实现一个中间件。

中间件是什么？

redux中管理数据的流程是单向的，就是说，从派发动作一直到发布订阅触发渲染是一条路走到头，那么如果想要在中间添加或是更改某个逻辑就需要找到action或是reducer来修改，有没有更方便的做法呢？
redux的流程：
button -触发事件-> dispath -派发动作-> reducer -发布订阅-> view
而中间件（middleware）就是一个可插拔的机制，如果想找扩展某个功能，比如添加日志，在更新前后打印出state状态，只需要将日志中间件装到redux上即可，于是便有了日志功能，当不想使用时可再拿掉，非常方便。

中间件的使用

redux-logger日志中间件

redux提供了好多个现成的中间件，比如上面提到的日志中间件，安装它即可使用：
npm i –save redux-logger
复制代码redux包提供了一个方法可以装载中间件：applyMiddleware
在创建store对象的时候，可以传入第二个参数，它就是中间件：
import { createStore, applyMiddleware } from “redux”;
import { reducer } from “./reducer”;
import ReduxLogger from “redux-logger”;
//使用applyMiddleware加载中间件
let store = createStore(reducer, applyMiddleware(ReduxLogger));
复制代码这样在每一次更新state，会在控制台打印更新日志：

redux-thunk

redux-thunk中间件可以支持异步action。
加载中间件：
import reduxThunk from “redux-thunk”;
let store = createStore(reducer, applyMiddleware(reduxThunk));
复制代码当加载了redux-thunk中间件，action函数可以支持返回一个函数，将异步操作封装在里面：
function add(payload) {
return function(dispatch, getState) {
setTimeout(() => {
dispatch({ type: ADD, payload });
}, 2000); //延时2秒执行
};
}
复制代码可以看到action又返回一个函数，其中的参数dispatch和getState就是redux提供的方法，它将这两个函数的使用权交给了我们，让我们等待异步操作完成 时再调用，完成异步action编写。

redux-promise

有了redux-thunk中间件我们可以编写异步action，但我们想更进一步，让异步action支持Promise，那么redux-promise中间件可派上用场。
还是安装redux-promise然后加载它：
import reduxPromise from “redux-promise”;
let store = createStore(
reducer,
applyMiddleware(reduxPromise)
);
复制代码redux-promise中间件可以支持action返回的对象payload为一个Promise：
let action = {
add: function(payload) {
return {
type: ADD,
//payload是一个Promise对象，异步操作封装到里面
payload: new Promise((resolve, reject) => {
setTimeout(() => {
resolve(payload); //执行成功，将参数传到reducer
}, 1000);
})
};
},
minus: function(payload) {
return {
type: MINUS,
payload: new Promise((resolve, reject) => {
setTimeout(() => {
reject(payload); //执行失败，将参数传到reducer
}, 1000);
})
};
}
};
复制代码可以看到，payload不再是直接返回参数，而是改为一个Promise对象，这样就可以把异步代码封装到里面。
注意！如果你使用redux-promise中间件，payload参数名是固定的，不可随意改名
比如：
{
type: MINUS,
num: new Promise((resolve, reject) => {
//…
})
};//此处参数名是num，redux-promise不能正确识别，若使用redux-promise必须叫payload

redux-saga