Redux-saga

前言

在阅读此文章前，需要你会ES6的Generator函数，另外redux中间件的原理也希望你能初步了解。

为什么会有redux-saga

中间件用过redux-thunk，也用过redux-promise-middleware，原理都很简单。

thunk就是简单的action作为函数，在action进行异步操作，发出新的action。
而promise只是在action中的payload作为一个promise，中间件内部进行处理之后，发出新的action。

这两个简单也容易理解，但是当业务逻辑多且复杂的时候会发生什么情况呢？我们的action越来越复杂，payload越来越长，当然我们可以分离开来单独建立文件去处理逻辑，但是实质上还是对redux的action和reducer进行了污染，让它们变得不纯粹了，action就应该作为一个信号，而不是处理逻辑，reducer里面处理要好一些，但是同样会生出几个多余的action类型进行处理，而且也只能是promise，不能做复杂的业务处理。

redux-saga将进行异步处理的逻辑剥离出来，单独执行，利用generator实现异步处理。
一个计数器示例

redux-saga

1. saga任务，新建文件处理业务逻辑，使用generator，redux-saga提供很多函数方便处理，put发出action，takeEvery监听action，takeLatest只执行最后一次action，call执行函数，并且可以获取promise的数据

import {delay} from 'redux-saga'
import {put, takeEvery, all, call} from 'redux-saga/effects'

export function* hello() {
  console.log('hello saga!')
}
const ajax = () => new Promise(resolve=>setTimeout(()=>resolve(99), 4000))
export function* incrementAsync() {
  let data = yield call(ajax)
  yield put({type: 'INCREMENT'})
}

export function* watchIncrementAsync() {
  yield takeEvery('INCREMENT', ()=>console.log('+1'))
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

export default function* rootSaga() {
  yield all([
    hello(),
    watchIncrementAsync()
  ])
}

2. 启动generator

const sagaMiddleware = createSagaMiddleware()
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga)

后话

antd的dva是对redux-saga的一个很好的实现。