Redux进阶三：使用redux-saga使用入门

上一篇文章介绍了redux-thunk中间件，redux-thunk中间件主要使action返回函数成为了可能，可以把异步请求放在action中，今天给大家介绍另一种中间件，redux-saga，可以将异步请求统一放在sagas.js中

参考文档：GitHub https://github.com/redux-saga/redux-saga

第一步骤:安装中间件

npm install --save redux-saga //yarn add redux-saga也是可以的

根据官网提供的main.js去改变项目中store.js文件

store.js

import {createStore, applyMiddleware, compose} from 'redux';
// import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import todoSagas from './sagas'
import reducer from './reducer';
const sagaMiddleware = createSagaMiddleware()
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
  const enhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
  const store = createStore(
  reducer,
  enhancer
);
sagaMiddleware.run(todoSagas)
export default store;

此时此刻我们发现store.js中多了一句话：sagaMiddleware.run(todoSagas)，todoSagas是从sagas中引过来的，具体思路是什么呢？

就是我们需要建立一个sagas.js文件，可以专门来存放异步请求，然后在store.js中需要调用saga中间件的run的方法去运行起来

好的，下面开始走下面的流程

第二步骤：在同一管理action的地方定义新的action变量

actionCreator.js

//getInitList函数返回一个对象，对象中有一个type类型
export const getInitList = () => ({
  type : GET_INIT_LIST
})

第三步骤：在需要请求的地方建立action，同时通过dispatch传递给store

demo.js

  componentDidMount(){
    const action = getInitList()
    console.log(action)
    store.dispatch(action)
  }

第四步骤：此时此刻，sagas.js开始起作用了，相当于除了reducer.js能够监听到action,而sagas.js同样也能监听到状态

sagas.js

import { takeEvery,put } from 'redux-saga/effects'
import { GET_INIT_LIST } from './actionTypes'
import {initListAction} from './actionCreators'
import axios from 'axios'
function* getInitList(){
  try{
    const res = yield axios.get("https://www.easy-mock.com/mock/5c4173448ff5e33c8a22766e/example/listdata")
    const action = initListAction(res.data.result)
    yield put(action)
  }catch(e){
    console.log('网络请求失败')
  }

}
// generator 函数
function* mySaga() {
  yield takeEvery(GET_INIT_LIST, getInitList);
}
export default mySaga;

其中takeEvery是redux-saga的方法，目的是监听到action，而put的作用相当于dispatch的作用，将action传给store