redux中间件-redux-saga

 今天，让我们一起揭开redux中间件-redux-saga的神秘面纱。

本次小文章将会以任务驱动的形式去逐步讲解saga及其在redux中的使用，这样易于理解，有理有据能够化抽象为具体。

• 首先，有了redux-thunk，为什么还要使用redux-saga中间件？

redux-thunk只是提供了一种redux状态管理中，异步逻辑的一种解决方案。而对于更加复杂多变的业务逻辑，thunk显得相对乏力。相比之下，saga功能更加强大，提供了更多API，能够对redux进行各种操作，而且在使用ES6语法下，代码更加简洁可维护。

• 其次，在redux中如何使用redux-saga？

在安装node和redux的前提下，在项目下执行cmd：

npm i redux-saga

将redux-saga导入并执行得到saga插件，安装在redux上

import { createStore, applyMiddleware } from "redux"
/*sagaAPI*/
import createSaga from 'redux-saga'
/*导入reducer,作为createStore的参数*/
import reducer from './reducer'
//获得saga对象
const saga = createSaga()

const store = createStore(reducer, applyMiddleware(saga))
/*导出安装的saga对象,以便外部调用generator函数*/
export {
    saga
}

export default store

准备好saga需要的业务函数：

import { put } from 'redux-saga/effects'
import axios from 'axios'

function* get_motto() {
    /*generator函数中,功能块必须用yield关键字划分,确保功能成功执行*/
    const result = yield axios.get('https://v.api.aa1.cn/api/api-wenan-dujitang/index.php?aa1=json')
    yield put({ 'type': 'get_motto', 'value': result.data })
}

export {
    get_motto
}

实际中的使用很简单先导入saga对象和store，外加generator函数即可

例如：

<script>
import store from '@/redux/store'
import { get_motto } from '@/redux/saga'
import { saga } from '@/redux/store';
export default {
  name: "SagaMD",
  data() {
    return {
        'state':store.getState()
    }
  },
  methods: {

  },
  mounted(){
    /*监听state变化*/
    store.subscribe(()=>{
      this.state=store.getState()
    })
    /*运行saga的generator函数即可触发dispatch*/
    saga.run(get_motto)
    
  }
};
</script>

• 然后，saga是什么？有什么特点？

saga其实就是一个generator函数，使用yield关键字控制函数执行流程，已达到异步逻辑和业务流程的完成。在saga中，封装在'redux-saga/effects'中的put函数就相当于dispatch函数，我们只需put一个普通的action即可。

• 最后，在redux中使用redux-saga有什么要注意的地方？

redux-saga安装在redux中后，要导出安装的saga对象给外部脚本，因为组件中需要安装的saga对象去执行generator函数，以便完成异步逻辑和触发dispatch。

saga中的函数要求都要是generator函数，使用yield关键字控制函数执行。

今日格言：IT是梦，助力了每一位兢兢业业的科研人员！