Redux(4) -saga 处理异步数据

redux中异步数据处理除了redux-thunk之外、还有一个插件叫 redux-saga
这个插件会让代码更易读、使用的是ES6的Generator功能、
不同于thunk 、saga避免了回调地狱
话不多说

安装此插件
npm i redux-saga
或
yarn add redux-saga

对其使用
store.js

import { createStore, applyMiddleware } from 'redux'
import sagas from './sagas' // 异步代码在这个文件    
 
import reduxSaga from 'redux-saga';

import reducer from './reducer'

const creaSagaMiddleware = reduxSaga();  //上来执行下方法

const store = createStore(reducer, applyMiddleware(creaSagaMiddleware))  //然后放在applyMiddleware中

creaSagaMiddleware.run(sagas) 最后run一下

export default store;

saga.js

import { put,takeEvery } from 'redux-saga/effects'     ///put相当于dispatch、提交到reducer 

function asyncIncrement() {    //模拟ajax请求  在真实项目中可以用来获取数据
  console.log('saga')
  return new Promise((resolve, reject) => {
    setTimeout(function () {
      resolve(2)
    }, 2000)
  })
}

function* add() {
  let result = yield asyncIncrement()   //执行的异步
  console.log(result)
  yield put({ type:'increment', data: result })   //reducer中的type、在这里转到reducer中
}

function* sagas() {
  yield takeEvery('async_increment', add)   //用来接收connect的type的订阅、然后执行add函数
}


export default sagas;

connect.js

import { connect } from 'react-redux'

const mapState = (state) => {
  return {
    count: state.count
  }
}

const mapDispatch = (dispatch) => {
  return {
    incre: () => {

      dispatch({ type: 'async_increment'})    //这里的type为saga中的takeEvery("")

    },
    decre: () => {
      dispatch({ type: "increment" })
    }
  }
}


export default connect(mapState, mapDispatch);

其中使用connect组件的代码在上一篇**Redux(3)**中有写到、可以看一下、

最后、梳理一下上面的流程
redux-saga就是redux一个中间件、作用就是为了使异步数据更易读
流程：
1、在store.js中、创建createStore时、先引入saga并且先执行一下
2、然后createStore(reducer,applyMiddleware(creaSagaMiddleware))
3、接着需要run一下引入的sagas文件creaSagaMiddleware.run(sagas)
4、sagas文件是具体执行的异步代码
5、在redux-saga中可以解构出{put,takeEvery} from redux-saga/effects
6、put相当于dispatch抛发给reducer、takeEvery用来拦截订阅connect的函数

在实际应用中：
connect用来暴露给组件调用方法
然后根据type转到saga中执行异步操作
执行完成后，put再传给reducer、然后修改数据

以上是redux需要异步时的操作及流程
不对地方请指正