redux-saga用法

启用

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import rootSaga from './sagas'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(rootSaga)

redux-saga概念

• 在redux-saga中的函数分为两种：
  • watcher saga：接收特定的action，然后驱动worker saga执行
  • worker saga： 实现具体的业务逻辑操作
  • 

function* workerSaga(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* watcherSaga() {
  yield takeEvery("USER_FETCH_REQUESTED", workerSaga);
}

watcherSaga：watcherSaga中使用了redux-saga提供的API函数takeEvery()，当有接收到USER_FETCH_REQUESTED action时，会启动worker saga。

• （另一个常用的辅助函数takeLatest()，当有相同的action发送过来时，会取消当前正在执行的任务并重新启动一个新的worker saga）

workerSaga：通过call()以及put()这样的函数来派发action或者执行其他异步函数 => Effect

• 实际上，我们直接通过yield fetchUser()执行我们的异步任务，并返回一个Promise也是可以的，但不推荐。

如果你想要同时监听不同的action，可以使用all()或者race()把他们组合成一个root saga：

export default function* rootSaga() {
  yield all([
    takeEvery("FOO_ACTION", fooASaga),
    takeEvery("BAR_ACTION", barASaga)
  ])
}