P18:Redux进阶-用Redux-saga获取TodoList列表

上节内容已经完成了redux-saga的安装和基本配置,这篇文章就用Redux-saga来完成TodoList的列表获取。其实redxu-saga是比redux-thunk要复杂的,它多出了很多API需要学习,至少是学习成本增加了。但是有的人说saga更适合于大型项目,本人不予表态,也不想引战,如果你的公司用了saga,这两篇文章足可以让你入门了。

编写TodoList.js文件

我们先来改造TodoList.js文件,现在componentDidMount里边是空的,所以我们要进行redux的基本操作,这个流程我不再多作介绍了,已经练习了10几遍了。

当然可以先引入一个action,当然这个action还没有,我们一会再进行编写,给它起名叫做getMyListAction(名字随意起,但是要记住,因为下面我们要不断使用)

import {getMyListAction, changeInputAction , addItemAction ,deleteItemAction} from './store/actionCreatores'

然后顺势在actionCreators.js文件里把这个action创建出来。

export const getMyListAction = ()=>({
    type:GET_MY_LIST
})

写完你会发现GET_MY_LIST也没有,需要先引入,再到actionTypes.js里进行定义

import {GET_MY_LIST,CHANGE_INPUT , ADD_ITEM,DELETE_ITEM,GET_LIST}  from './actionTypes'

actionTypes.js文件定义GET_MY_LIST

export const  GET_MY_LIST = 'getMyList'

之后就可以回到TodoList.js文件,编写componentDidMount里的内容了。

componentDidMount(){
    const action =getMyListAction()
    store.dispatch(action)
    console.log(action)
}

测试完成,可以删除console.log(),保持代码的简洁和没有冗余代码。

编写sagas.js文件(也是业务逻辑)

saga的中间件业务逻辑,就都写在这个sagas.js文件里,文件里我们用mySaga来作为入口函数。在入口函数中捕获传递过来的action类型,根据类型不同调用不同的方法。

import { takeEvery } from 'redux-saga/effects'  
import {GET_MY_LIST} from './actionTypes'

//generator函数
function* mySaga() {
    //等待捕获action
    yield takeEvery(GET_MY_LIST, getList)
}

function* getList(){
    console.log('jspang')
}

export default mySaga;

写完上面的代码,我们看一下是否可以正确在浏览器的控制台打印出结果,如果可以顺利的打印出来,说明到目前为止制作正确。然后接下来我们就要用axios来请求结果了。

这里给出sagas.js的所有内容

import { takeEvery ,put } from 'redux-saga/effects'  
import {GET_MY_LIST} from './actionTypes'
import {getListAction} from './actionCreatores'
import axios from 'axios'

//generator函数
function* mySaga() {
    //等待捕获action
    yield takeEvery(GET_MY_LIST, getList)
}

function* getList(){
    const res = yield axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList')
    const action = getListAction(res.data)
    yield put(action)
}

export default mySaga;

以上就是Redux-saga的基本使用方法,其实saga还有其它一些API,但是我工作中用的也不是很多,所以这里也只能保证你达到入门的水平,至于深入,你可以自己探索。至于redux-thunkredux-saga哪个好的问题,这里不作争论,用网上流行的话说,小孩子才做选择题,技术老鸟全都学。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P18:Redux进阶-用Redux-saga获取TodoList列表

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发