P18:Redux-saga获取TodoList列表

Posted 2022-01-06 wgchen~

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了P18:Redux-saga获取TodoList列表相关的知识，希望对你有一定的参考价值。

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()，保持代码的简洁和有没有冗余代码。

编写 `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;