今天,让我们一起揭开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是梦,助力了每一位兢兢业业的科研人员!