P18:Redux-saga获取TodoList列表

阐述

上节内容已经完成了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;

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

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