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-thunk
和redux-saga
哪个好的问题,这里不作争论,用网上流行的话说,小孩子才做选择题,技术老鸟全都学。
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P18:Redux进阶-用Redux-saga获取TodoList列表