> For the complete documentation index, see [llms.txt](https://jack1in.gitbook.io/font-end/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jack1in.gitbook.io/font-end/3.-react/3.4-redux-saga.md).

# 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);
}
```