P18:Redux-saga获取TodoList列表

布满荆棘的人生 2023-10-06 20:57 9阅读 0赞

#### Redux 进阶 ####

*  阐述
 *  编写 \`TodoList.js\` 文件
 *  编写 \`sagas.js\` 文件(也是业务逻辑)

## 阐述 ##

上节内容已经完成了redux-saga的安装和基本配置，这篇文章就用Redux-saga来完成TodoList的列表获取。

其实redxu-saga是比redux-thunk要复杂的，它多出了很多API需要学习，至少是学习成本增加了。

但是有的人说saga更适合于大型项目，本人不予表态，也不想引战，如果你的公司用了saga，这两篇文章足可以让你入门了。

## 编写 `TodoList.js` 文件 ##

我们先来改造 `TodoList.js` 文件，现在 `componentDidMount` 里边是空的，所以我们要进行redux的基本操作。

当然可以先引入一个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()`，保持代码的简洁和有没有冗余代码。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 编写 `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('willem')
    }
    
    export default mySaga;

写完上面的代码，我们看一下是否可以正确在浏览器的控制台打印出结果，如果可以顺利的打印出来，说明到目前为止制作正确。

然后接下来我们就要用axios来请求结果了。

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

import {
         takeEvery ,put } from 'redux-saga/effects'  
    import {
        GET_MY_LIST} from './actionTypes'
    import {
        getListAction} from './actionCreators'
    import axios from 'axios'
    
    //generator函数
    function* mySaga() {
        
        //等待捕获action
        yield takeEvery(GET_MY_LIST, getList)
    }
    
    function* getList(){
        
        const res = yield axios.get('http://tt.cc/test.php')
        const action = getListAction(res.data)
        yield put(action)
    }
    
    export default mySaga;

以上就是Redux-saga的基本使用方法，其实saga还有其它一些API，但是我工作中用的也不是很多，所以这里也只能保证你达到入门的水平，至于深入，你可以自己探索。

至于redux-thunk和redux-saga哪个好的问题，这里不作争论，用网上流行的话说，小孩子才做选择题，技术老鸟全都学。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ce80a6ef36bb4acd9d8eca6595fc23d8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/6728ae6b87a9483eb66181a8e3c50b1a.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16