什么是中间件？
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。
为什么要使用中间件？
redux基础用法：用户发出Action, Reducer函数算出新的State, view重新渲染。
但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后，Reducer 立即算出 State，这叫做同步；Action 发出以后，过一段时间再执行 Reducer，这就是异步。
怎么才能 Reducer 在异步操作结束后自动执行呢？这就要用到新的工具：中间件（middleware）。
中间件的作用
（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担其他功能，也承担不了，因为理论上，纯函数不能进行读写操作。
（2）View：与 State 一一对应，可以看作 State 的视觉层，也不合适承担其他功能。
（3）Action：存放数据的对象，即消息的载体，只能被别人操作，自己不能进行任何操作。
作用1：添加日志功能，把action和state打印出来，可以对store.dispatch进行改造
let next = store.dispatch;
store.dispatch = function dispatchAndLog(action) {
console.log('dispatching', action);
next(action);
console.log('next state', store.getState());
}
中间件的用法
import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(logger)
);
1.引入applyMiddleware和createStore函数
applyMiddleware作用：将所有中间件组成一个数组，依次执行。
createStore方法可以接受整个应用的初始状态作为参数，applyMiddleware是第三个参数。
2.生成中间件
3.把中间件放在applyMiddleware方法中，传入createStore方法，就完成了store.dispatch()的功能增强。
异步操作基本思路
同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。
- 操作发起时的 Action
- 操作成功时的 Action
- 操作失败时的 Action
以向服务器取出数据为例，三种 Action 可以有两种不同的写法。
// 写法一：名称相同，参数不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }
// 写法二：名称不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }
除了 Action 种类不同，异步操作的 State 也要进行改造，反映不同的操作状态。下面是 State 的一个例子。
let state = {
// ...
isFetching: true,
didInvalidate: true,
lastUpdated: 'xxxxxxx'
};
上面代码中，State 的属性isFetching表示是否在抓取数据。didInvalidate表示数据是否过时，lastUpdated表示上一次更新时间。
现在，整个异步操作的思路就很清楚了。
- 操作开始时，送出一个 Action，触发 State 更新为"正在操作"状态，View 重新渲染
- 操作结束后，再送出一个 Action，触发 State 更新为"操作结束"状态，View 再一次重新渲染
中间件的类型
redux-thunk , redux-promise, logger
thunk的作用：异步操作至少要送出两个 Action：用户触发第一个 Action，在操作结束时，系统自动送出第二个 Action (我们可以dispatch一个方法，而不仅限于一个纯的action对象。)
promise的作用：也是发出action.
logger的作用：打印日志。
redux-thunk和redux-promise的区别：
react-thunk 比较适合于简单的API请求的场景，而 Promise 则更适合于输入输出操作，比较fetch函数返回的结果就是一个Promise对象
标签：异步,中间件,State,Action,操作,redux From： https://www.cnblogs.com/hxy--Tina/p/16594568.html