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哪个好的问题，这里不作争论，用网上流行的话说，小孩子才做选择题，技术老鸟全都学。