17.Redux-saga中间件的使用19-05-29

到https://github.com搜索redux-saga，点击### redux-saga / redux-saga
这里会详细的告诉我们redux-saga.

一.redux-saga的配置

1.安装

npm install --save redux-saga
or
yarn add redux-saga

2.引入

在store的index.js文件中引入createSagaMiddleware（帮助我们创建中间件的方法）
import createSagaMiddleware from 'redux-saga'

3.创建中间件

通过这个方法生成一个sagaMiddleware
const sagaMiddleware = createSagaMiddleware();
用composeEnhancers将sagaMiddleware这个中间件传入进去
const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));

4.创建sagas.js文件

在store的index.js中引入sagas
import todoSagas from './sagas';
创建好store之后调用sagaMiddleware.run方法
sagaMiddleware.run(todoSagas)
这时运行是会报错的，需要去saga.js中添加代码

function* todoSagas() {
}
export default todoSagas;

运行网页，不报错的话redux_saga就配置成功了。

二.redux-saga实现异步操作

1.到actionCreators.js中创建一个方法返回的action是对象

export const getInitList = () => ({
  type:GET_INIT_LIST,
})

2.当组件加载完成之后的方法，调用actionCreator去创建一个action

componentDidMount() {
    const action = getInitList();
    store.dispatch(action);
//有了redux-saga之后，除了reducer可以接收action，sagas也可以接收
  }

3.sagas.js接收action

import {takeEvery} from 'redux-saga/effects';
//使用takeEvery方法

//这里要求必须使用generator函数，可以先使用，以后再了解
function* todoSaga() {
//takeEvery 就是去捕捉每一个类型
   yield takeEvery(GET_INIT_LIST, getInitList);
//只要我接收了一个GET_INIT_LIST类型的action的话，我就会指向getInitList这个方法
}

getInitList方法

function * getInitList() {
  console.log('abc');
}

打印成功，我们就可以在getInitList方法里进行异步请求了

import {takeEvery, put} from 'redux-saga/effects';
import {initListAction} from './actionCreators';
import axios from 'axios';

function * getInitList() {
    axios.get('/List.json').then((res) => {
        const data = res.data;
        const action = initListAction(data);
       console.log(action);
})
}

上面代码块儿写法是错误，这里用了generator函数，generator函数里面做异步请求的时候就不要用promise这种形式了

function * getInitList() {
  try {
    const res = yield axios.get('/list.json'); //等待axios获取完毕，将结果直接存在res里
    const action = initListAction(res.data);
    yield put(action);//等action处理完成之后,再往下执行代码
  }catch (e) {
    console.log('list.json网络请求失败');
  }
}