iT邦幫忙

0

redux-saga 學習筆記 (1)

arthur104 2 月前8445 瀏覽

為什麼要學習 redux-saga

  • 主要用於管理 redux 中,非同步的 action

其他可選套件

  • redux-loop
  • redux-thunk
  • redux-promise

優點

  • 聲明式指令
  • 可測試
  • 可 mock
  • code 集中在 saga 中管理,不再散落在各處,全同步執行,就算邏輯再複雜,看起來也不會亂 [1]
  • 最主要還是解決複雜的異步交互情況,特別是競爭狀態 [3]

範例 [1]

使用 saga 前

  • 在 action creator 裡處理邏輯,但是難以測試
// action creator with thunking
function 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

  1. React + Redux 最佳实践
  2. Redux-saga 中文文档
  3. Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES7 async/await
  4. Saga Pattern 在前端的應用

尚未有邦友留言

立即登入留言