redux-saga要收尾啦，不過我還想整理一個 RTK 與 saga 結合的小 demo 又要晚點用了，今天就來大概講解一下 saga 的計數器應用吧。

一樣可以配合 codesandbox 服用喔

開始啦～

• index.js
  先前說過 saga 做為 middleware 在 redux 裡應用，這裏先使用 applyMiddleware 連結我們的 middleware 到 Store。

import { createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import rootSaga from "./sagas";

const sagaMiddleware = createSagaMiddleware();
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

const action = (type) => store.dispatch({ type });

• 並且使用 sagaMiddleware.run(helloSaga)來啟動 Saga。
• 宣告 action 便於下方行為操作 dispatch
• Counter.js 這隻檔案是用來宣告 component
• reducers.js 用來匯出可操作 action

接下來重頭戲來啦

• saga.js : incrementAsync() 這裡放很多 yield 其實就是用來驗證，先前提到的 yield 執行完才會執行下一個，而中間其中一個有誤就會進到 catch(error) function

// helloSaga function 裡其實不放 yield 也能正確執行，不過會有 eslint 警告
export function* helloSaga() {
  yield console.log("Hello Sagas!");
}

export function* incrementAsync() {
  try {
    // yield call({ type: "CONSOLE" }); => 這一行可以用來測試 try/catch
    console.log("async");
    yield call(delay, 500);
    yield put({ type: "INCREMENT" });
		// put 執行相同 dispatch 行為
  } catch (error) {
    console.log("error:", error);
  }
}

// 呼叫action type:"INCREMENT_ASYNC"，執行incrementAsync function
export function* watchIncrementAsync() {
  yield takeEvery("INCREMENT_ASYNC", incrementAsync);
}

搭拉～
這樣就可以執行基本的 saga 啦～