为什么要学习 redux-saga

主要用于管理 redux 中，非同步的 action

---

其他可选套件

redux-loopredux-thunkredux-promise

---

优点

声明式指令可测试可 mockcode 集中在 saga 中管理，不再散落在各处，全同步执行，就算逻辑再複杂，看起来也不会乱 [1]最主要还是解决複杂的异步交互情况，特别是竞争状态 [3]

---

範例 [1]

使用 saga 前

在 action creator 里处理逻辑，但是难以测试

// action creator with thunkingfunction createRequest () {  return (dispatch, getState) => {    dispatch({ type: 'REQUEST_STUFF' });    someApiCall(function(response) {      // some processing      dispatch({ type: 'RECEIVE_STUFF' });    });  };}

在 component 中

function onHandlePress () {  this.props.dispatch({ type: 'SHOW_WAITING_MODAL' });  this.props.dispatch(createRequest());}

Code is everywhere.

使用 saga 后

通过 saga，你只需要触发一个 action

function onHandlePress () {  // createRequest 触发 action `BEGIN_REQUEST`  this.props.dispatch(createRequest());}

然后所有后续的操作都通过 saga 管理

function *watchBeginRequest() {  yield takeEvery('BEGIN_REQUEST', beginRequest);}function beginRequest() {  yield put({ type: 'SHOW_WAITING_MODAL' });  const response = yield call(myApiFunctionThatWrapsFetch);  yield put({ type: 'PRELOAD_IMAGES', response.images });  yield put({ type: 'HIDE_WAITING_MODAL' });}

所有业务代码都存于 saga 中，不再散落在各处
全同步执行，就算逻辑在複杂，看起来也不会乱

---

Reference

React + Redux 最佳实践Redux-saga 中文文档Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES7 async/awaitSaga Pattern 在前端的应用