3.4 Redux-Saga

原 Redux 流程為先對 Component 做 connect ，之後便可使用 Store 的 dispatch 觸發預先在 Reducer 中寫好的邏輯。 而 Redux - Saga 的流程同樣是先對 Component 做 connect ，但 dispatch 觸發的事件為 React - Saga 預先訂閱的名稱，在該事件裡才依照流程去觸發需執行的 Reducer 邏輯。

原本被 dispatch 觸發的 Method 從 Reducer 變成 Redux - Saga 。

function ＊ --> Generator Function Generator Function 能夠配合 yield 在執行的過程中喊停。

yield

• call 執行function yield call(function, arg1, arg2)

• put 觸發dispatch

Call vs Fork

saga 中 call 和 fork 都是用來執行指定函数 fn，區別在於：

• call effect 會阻塞當前 saga 的執行，直到被調用函数 fn 返回结果，才會執行下一步代碼。

• fork effect 則不會阻塞當前 saga，會立即返回一個 task 對象。

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('hello saga');
    }, 2000);
  });
}

function* fetchData() {
  // 等待 2 秒後，印出歡迎詞（阻塞）
  const greeting = yield call(fn);
  console.log('greeting: ', greeting);

  // 立即打印 task 對象（非阻塞）
  const task = yield fork(fn);
  console.log('task: ', task);
}