什么是中间件
中间件就是一个函数，对store.dispatch方法进行了改造，在发出 Action 和执行 Reducer 这两步之间，添加了其他功能。如下图:
理解了中间件以后，就可以处理异步操作了。
同步操作只要发出一种 Action 即可，异步操作的差别是它要发出三种 Action。 用户触发第一个 Action，这个跟同步操作一样，没有问题；如何才能在操作结束时，系统自动送出第二个 Action 呢？
这时候就需要redux-thunk的出现了
Redux-thunk
const fetchPosts = postTitle => (dispatch, getState) => {
dispatch(requestPosts(postTitle));
return fetch(`/some/API/${postTitle}.json`)
.then(response => response.json())
.then(json => dispatch(receivePosts(postTitle, json)));
};
};
// 使用方法一
store.dispatch(fetchPosts('reactjs'));
// 使用方法二
store.dispatch(fetchPosts('reactjs')).then(() =>
console.log(store.getState())
);
上面代码中，fetchPosts是一个Action Creator（动作生成器），返回一个函数。这个函数执行后，先发出一个Action（requestPosts(postTitle)），然后进行异步操作。拿到结果后，先将结果转成 JSON 格式，然后再发出一个 Action（ receivePosts(postTitle, json)）。
这样不就解决了不能异步操作的事了吗?
但是store.dispatch()只接受以对象格式的action怎么办?
用redux-thunk!
它的主要作用是将store.dispatch()方法改造,让store.dispatch()接受函数格式的action
Redux-saga
redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。
与redux-thunk区别就是他可以集中的管理异步请求,不像thunk在action里进行异步请求
redux-saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action，然后可以派生一个新的任务对state进行维护
一般用法:
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects';
import {GET_ADD_LIST} from './actionTypes'
import {SET_TABLE_LIST} from './actionCreator'
import axios from 'axios';
function* MySagas(action){
//takeLatest,takeEvery用于监听action的变化,一有变化立马执行getList
yield takeLatest(GET_ADD_LIST,getList)
}
//将then()的链式写法简化成同步的函数一样
function* getList(){
const res =yield axios.get('https://www.easy-mock.com/mock/5f471db6cad6947846effe94/redux/getTable')
const action =SET_TABLE_LIST(res.data);
//put()相当于store.dispatch()
yield put(action)
}
export default MySagas;
具体用法参考:
