用redux-saga实现异步获取数据action

上个章节我们用了redux-thunk中间件来处理数据，现在我们用另外一个中间件，来处理axios，相对来说比较复杂一点点，但是小学生才做选择题，2个我们都得会，看个人爱好吧。上代码
1安装redux-saga

cnpm   install redux-sage --save

2:改造

//redux-saga 
import createSagaMiddle from 'redux-saga';
const sagaMiddle  = createSagaMiddle();
const halders = 	componseHandles(applyMiddleware(sagaMiddle));

3:必须要用一个render，所以我们要用gener的es6语法定义一个函数
新建一个sagas.js文件，然后内容如下

import {takeEvery,put} from 'rdux-saga/effects';
import axios from 'axios';
import {GETSAGALIST} from './actionTypes.js';

import {getDataAction} from './actionCreaters.js';
//generator
function* mySaga(){
	yield takeEvery(GETSAGALIST,getList)
}

//建议使用generator函数
function* getList(){
	console.log("dondong");
	const res = yield axios.get('/api/list');
	const action  = getDataAction(res.data.data);
	yield put(action);
}

export default mySaga;

ps:这里注意要引入effects下面哦

改造actionCreater.js这里的获取数据方式

//用redux-saga 提取后台获取接口数据
export const getTodolistSaga=(data)=>({
	type:GETSAGALIST
	
})

改造actinTypes.js

//redux-saga
export const GETSAGALIST = 'getSagaData';

具体使用

	componentDidMount(){
		//let  api = "http://localhost:3333/api/list";
		// let  api = "/api/list";
		// axios.get(api).then((res)=>{
		// 	console.log(res.data.data);
		// 	let  list =res.data.data;
		// 	const  action  = getDataAction(list);
		// 	store.dispatch(action);
		// }).catch(err=>{
		// 	console.log(err)
		// });
		//使用redux-saga之后
		const action =getTodolistSaga()
		store.dispatch(action);
	};