react中间件 react-saga

redux-saga 出发点跟 redux-thunk 是一样的，为了解决异步操作，把异步的逻辑单独的放到一个saga.js文件里面。 采用的是 generator 函数进行构建的。国内文档。

安装 yarn add redux-saga

使用：

1. 配置入口，一般在 store/index.js 入口文件中进行配置，创建一个hellosaga:

import { createStore, applyMiddleware, compose } from 'redux';
import reducer from './reducer'
import createSagaMiddleware from 'redux-saga'
import { helloSaga } from './sagas'

// 引入中间件
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 )

// 必须有个run函数，才能可以访问
sagaMiddleware.run(helloSaga)

export default store

然后在sagas.js 进行写异步函数：

import { put, takeEvery, all, call } from 'redux-saga/effects'
// tabeEvery 捕捉每一个action   put也可以发送action到store里面
import { GET_INIT_LIST } from './actionTypes'
import axios from 'axios'

function* fetchUser(){
   let getAjax = yield axios.get('/test.json')
   let actions = {
      type:'init_state_sync',
      value: getAjax.data.list
   }

   // 提交这个actions 到store里面，和在reducer里面提交是一样的
   yield put( actions )
}

export function* helloSaga() {
   // 很重要的一点，进行捕获 组件里面发出的tyepe类型是  GET_INIT_LIST 的action
     yield takeEvery( GET_INIT_LIST, fetchUser )
}

最后调用的地方是在组件里面，某个钩子函数里面，发出action的调用：

 componentDidMount(){
      let  actions =  getInitdataList()
      store.dispatch( actions )
    }

因此，从上面我们可以看出来：除了在reducer可以接受 action以外，使用saga以后就可以在sagas文件里面也可以捕获到action，进行一步处理。

相比较于复杂的，比较多的api,处理非常大型的项目的时候是优于redux-thunk的。