如何使用saga：
1.使用createSagaMiddleware方法创建saga 的Middleware
const sagaMiddleware = createSagaMiddleware()
2.在创建的redux的store时，使用applyMiddleware函数将创建的saga Middleware实例绑定到store上.
applyMiddleware(sagaMiddleware,middleware)
3.最后可以调用saga Middleware的run函数来执行某个或者某些Middleware。
const store = createStoreWithMiddleware(rootReducer);
sagaMiddleware.run(rootSaga);
原理：
在saga中，我们可以使用takeEvery或者takeLatest等API来监听某个action，当某个action触发后，saga可以使用call、fetch等api发起异步操作，操作完成后使用put函数触发action，同步更新state，从而完成整个State的更新。
例子1：
action
export function requireDatas(reddit) : Action{
return {
type:GETDATA,
reddit
}
}
export function isLoading() : Action{
return {
type:ISLOADING,
proload: true
}
}
export function receiveDatas(reddit) : Action{
return {
type:RECEIVEDATAS,
reddit
}
}
当点击按钮，dispatch requireDatas 这个action，然后异步获取数据，然后，更新state。
设置saga：
export function getDataApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
yield put( actions.default.isLoading() )
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
yield takeEvery(GETDATA,requireDatas)
}
takeEvery监听'GETDATA'，当分发这个action的时候，执行requireDatas。
requireDatas：使用call 调用getDataApi获取数据，然后执行put方法，相当于dispatch 'RECEIVEDATAS' 这个action，从而state发生改变。
API
takeEvery
用来监听action。当监听到出发此action的时候，如果执行异步操作的话，无论第一次异步是否完成，当发生第二次的时候，都会继续执行。
export function* requireDatas(reddit){
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
yield takeEvery(GETDATA,requireDatas)
}
在上面的例子中，takeEvery 允许多个 requireDatas实例同时启动。即使第一个还没结束，第二个依然会启动。
takeLatest
作用同takeEvery一样，唯一的区别是它只关注最后，也就是最近一次发起的异步请求，如果上次请求还未返回，则会被取消。
export function* watchGetData(){
yield takeLatest(GETDATA,requireDatas)
}
只执行最后一次出发的 requireDatas；
put
yield put({ type: 'PRODUCTS_RECEIVED', products })
相当于dispatch({ type: 'PRODUCTS_RECEIVED', products })
call
call用来调用异步函数，将异步函数和函数参数作为call函数的参数传入，返回一个对象。
saga引入他的主要作用是方便测试，同时也能让我们的代码更加规范化。
export function getDataApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
const params = yield call(getDataApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
apply
saga同样提供apply函数，作用同call一样，参数形式同js原生apply方法。
cps
同call方法基本一样，但是用处不太一样，call一般用来完成异步操作，cps可以用来完成耗时比较长的io操作等。
cps(fn, ...args)
fn: Function - 一个 Node 风格的函数。即不仅接受它自己的参数，fn 结束后会调用一个附加的回调函数。回调函数接受两个参数，第一个参数是报错信息，第二个是成功的结果。
args: Array - 一个数组，作为 fn 的参数
参考自 官方文档
fork
非阻塞任务调用机制：相对于generator函数来说，call操作是阻塞的，只有等promise回来后才能继续执行，而fork是非阻塞的 ，当调用fork启动一个任务时，该任务在后台继续执行，从而使得我们的执行流能继续往下执行而不必一定要等待返回。
我们可以把上面的例子换成：
function* loginFlow() {
while(true) {
const {user, password} = yield take('LOGIN_REQUEST')
const task = yield fork(authorize, user, password)
const action = yield take(['LOGOUT', 'LOGIN_ERROR'])
if(action.type === 'LOGOUT')
yield cancel(task)
yield call(Api.clearItem('token'))
}
}
take
takeEvery 在每个 action 来到时派生一个新的任务，它只是监听每个action，然后执行处理函数。被调用的任务无法控制何时被调用， 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听。
而take则不一样，我们可以在generator函数中决定何时响应一个action，以及一个action被触发后做什么操作。
export function fetchPostsApi(reddit){
let res = axios.get('http://localhost:3000/getData',{params:reddit.reddit})
return res;
}
export function* requireDatas(reddit){
yield put( actions.default.isLoading() )
const params = yield call(fetchPostsApi, reddit);
yield put( actions.default.receiveDatas(params.data) )
}
export function* watchGetData(){
while(true) {
const params = yield take(GETDATA);
yield fork(requireDatas,params)
}
// yield takeEvery(GETDATA,requireDatas)
}
cancel
cancel的作用是用来取消一个还未返回的fork任务。防止fork的任务等待时间太长或者其他逻辑错误。
call
类似Promise中的all操作,可以将多个异步操作作为参数参入all函数中，如果有一个call操作失败或者所有call操作都成功返回，则本次all操作执行完毕。
const [users, repos] = yield all([
call(fetch, '/users'),
call(fetch, '/repos')
])
race
类似Promise中的race操作,可以将多个异步操作作为参数参入race函数中，如果有一个race操作失败或者成功，则本次race操作执行完毕。
yield race({
task: call(backgroundTask),
cancel: take('CANCEL_TASK')
})
Interface Task
Task 接口指定了通过 fork，middleware.run 或 runSaga 执行 Saga 的结果。
task.isRunning() 如果任务还未返回或抛出了一个错误则返回 true
task.result() 任务的返回值。如果任务正在执行中则返回 undefined
task.error() 任务抛出的错误。如果任务正在执行中则返回 undefined
task.done 一个 Promise，以下二者之一：
以任务的返回值 resolve
以任务抛出的错误 reject
task.cancel() 取消任务（如果任务还在执行中）
actionChannel
在之前的操作中，所有的action分发是顺序的，但是对action的响应是由异步任务来完成，也即是说对action的处理是无序的。
如果需要对action的有序处理的话，可以使用actionChannel函数来创建一个action的缓存队列，但一个action的任务流程处理完成后，才可是执行下一个任务流。
function* watchRequests() {
// 1- Create a channel for request actions
const requestChan = yield actionChannel('REQUEST')
while (true) {
// 2- take from the channel
const {payload} = yield take(requestChan)
// 3- Note that we're using a blocking call
yield call(handleRequest, payload)
}
}
详情请参考这个开源项目以及官方文档
其他关于redux异步
更多文章...
