Redux异步处理中间件redux-saga的使用

         现在reudx中流行的两大中间件：saga,thunk首先说一下这两者的区别：

        redux-thunk：

                使用起来比较简单，在action中处理异步等副作用操作，此时的action是一个函数，以   dispatch，getState作为形参，函数体内的部分可以执行异步。通过redux-thunk来处理异步action可谓是多种多样，不利于维护

        reudx-saga:        

                优点：
                        （1）集中处理了所有的异步操作，异步接口部分一目了然
                        （2）action是普通对象，这跟redux同步的action一模一样
                        （3）通过Effect，方便异步接口的测试
                        （4）通过worker 和watcher可以实现非阻塞异步调用，并且同时可以实现非阻塞
                        （5） 异步操作的流程是可以控制的，可以随时取消相应的异步操作。
               缺点：太复杂，学习成本较高

下面介绍一下redux-saga 在 Redux 中如何使用：

        下载reudx-saga：

                npm install redux-saga

        配置store:

import { createStore, combineReducers, applyMiddleware } from "redux"
import user from "./user";

// 引入中间件
import createSagaMiddleware from 'redux-saga'
import SagaCrea from './saga' //引入saga配置文件
const sagaMiddleCreate = createSagaMiddleware()
const Reducer = combineReducers({
    user
})
// 创建store   redux 中的中间件必须都在applyMiddleware上注册
const store = createStore(Reducer,applyMiddleware(sagaMiddleCreate))
// 运行saga
sagaMiddleCreate.run(SagaCrea)

export default store

       创建saga文件：

             这个的执行原理，当我们页面dispatch的时候，saga.js 会对里面的type 类型进行判断, 如果一样就证明是异步的，你可以去做一些操作，控制数据更新的时机。如果类型不同，那么就是同步action saga 就会放行。

import { takeEvery, put } from 'redux-saga/effects'
// put 它是saga提供给我们，用于发送指令给reducer来完成同步操作
// takeEvery 监听每一次dispatch发送的指令


// saga中间件 主saga，用于区别是否需要saga来处理异步操作，如果没有异步，则放行
function* mainSaga() {
    yield watchSaga()
}

// 监听saga，监听type类型为异步操作名称的，此saga会通过主saga分配过来
function* watchSaga() {
    // 如果type类型是adda 说明你进行的就是异步操作
    yield takeEvery('adda', workSaga)
}

// 工作saga，监听saga得到任务后，把任务分配给工作saga
function* workSaga({ payload }) {
    console.log(payload);
    // payload 获得传递的数据 比如：{type:"adda",payload:{name:"参数"}
    console.log("异步请求");
    // 发送指令让reducer完成同步操作
    yield put({ type: 'add', payload })
}

// 主saga要对外暴露出去
export default mainSaga