LoginSignup
1
1
@TK_Yudai

Redux-Saga: ジェネレータ関数の活用

Posted at

Redux-Saga: ジェネレータ関数の活用

Redux-SagaはReduxの強力なミドルウェアで、React/Reduxアプリケーションにおける複雑な非同期処理をより管理しやすくするために設計されています。Redux-Sagaの核心にはJavaScriptの「ジェネレータ関数」があります。この記事では、ジェネレータ関数を活用する方法と、Redux-Sagaでの使用例を紹介します。

ジェネレータ関数とは

ジェネレータ関数は、function* シンタックスを使って定義され、yieldキーワードを使用して実行を一時停止し、後で再開できる特殊な関数です。これは、非同期処理を同期的な形で記述し、管理するのに役立ちます。

ジェネレータ関数の動作

ジェネレータ関数の動作は以下の通りです：

  1. 関数の開始: ジェネレータ関数が初めて呼び出されると、コールスタックに実行コンテキストがプッシュされます。

  2. 一時停止: yieldで一時停止すると、その状態は保持され、コールスタックからは外されます。

  3. 再開: next()が呼ばれると、関数は一時停止した場所から再開します。

  4. 完了: returnまたは最後のyieldに達すると、ジェネレータ関数は完了し、その実行コンテキストはコールスタックから削除されます。

ジェネレータ関数のコード例

Redux-Sagaの動作をエミュレートするために、Redux-Sagaのcallやputなどの特定のメソッドを使用せず、純粋なJavaScriptのジェネレータ関数を使って非同期処理を模倣する簡単な例を示します。この例では、ジェネレータ関数を使って非同期APIコール（例えば、ユーザーデータの取得）を行い、その結果を処理する方法を示します。

まず、シンプルな非同期関数を定義します：

// 非同期APIコールを模倣する関数
function fetchUserData(userId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ userId, name: "John Doe" }); // モックデータを返す
    }, 1000); // 1秒後に解決
  });
}

次に、この非同期関数を呼び出すジェネレータ関数を定義します：

// ジェネレータ関数で非同期処理を管理
function* loadUserData(userId) {
  try {
    const user = yield fetchUserData(userId);
    console.log("User data fetched:", user);
    // 他の処理をここで行う
  } catch (error) {
    console.error("Failed to fetch user data:", error);
  }
}

最後に、ジェネレータ関数を実行し、非同期処理の完了を待ちます：

// ジェネレータ関数の実行と非同期処理の完了を管理
function runGenerator(generator) {
  const iterator = generator();
  function iterate(iteration) {
    if (iteration.done) return;
    const promise = iteration.value;
    promise.then(result => iterate(iterator.next(result)));
  }
  iterate(iterator.next());
}

// ジェネレータ関数を実行
runGenerator(function* () {
  yield loadUserData(1);
  // 他の副作用があればここに追加する。
  // yield otherFunction();
});

このコードでは、runGenerator関数がジェネレータ関数の実行を管理し、yieldキーワードで一時停止された非同期処理の完了を待ちます。非同期処理が完了すると、ジェネレータ関数は次のyieldまで再開されます。

この簡素なエミュレーションは、Redux-Sagaが内部的にどのように非同期処理を管理しているかの基本的な理解を提供します。もちろん、実際のRedux-Sagaはより複雑な機能とエラーハンドリングを提供しますが、この例はジェネレータ関数の基本的な使用法と非同期処理の管理方法を示しています。

Redux-Sagaの実装例

Redux-Sagaでは、ジェネレータ関数を用いて非同期処理を管理します。以下は、ユーザーデータを取得するAPIを呼び出す基本的なSagaの例です。

sagas.js:

import { call, put, takeEvery } from 'redux-saga/effects';
import Api from './path/to/api'; // API関数をインポート

// ワーカーサガ：APIを呼び出し、応答を処理
function* fetchUserData(action) {
   try {
      const user = yield call(Api.fetchUser, action.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

// ウォッチャーサガ：USER_FETCH_REQUESTEDアクションを監視
function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUserData);
}

export default mySaga;

このコードでは、fetchUserDataワーカーサガがUSER_FETCH_REQUESTEDアクションを監視し、該当するアクションがディスパッチされるとAPIを呼び出し、その結果に基づいて新しいアクションをディスパッチします。yieldを使用することで、非同期APIコールの完了を待ち、その後の処理を行います。

Redux-Sagaミドルウェアの代表的なエフェクト

Redux-Sagaは、非同期処理や副作用（サイドエフェクト）の管理を容易にするためにいくつかのエフェクトを提供しています。これらのエフェクトは、ジェネレータ関数内でyield式とともに使われ、Redux-Sagaミドルウェアによって特定の処理が行われるよう指示します。代表的なエフェクトにはcall, put, takeEveryなどがあります。

1. call

  • 用途: callエフェクトは非同期関数（例えばAPI呼び出し）を実行するために使用されます。
  • 動作: 非同期関数とその引数をcallに渡すと、Redux-Sagaはその関数の実行を処理し、プロミスが解決または拒否されるまで待ちます。
  • 例: yield call(fetchData, url)

2. put

  • 用途: putエフェクトはReduxストアにアクションをディスパッチするために使用されます。
  • 動作: アクションオブジェクトをputに渡すと、Redux-SagaはそのアクションをReduxストアにディスパッチします。
  • 例: yield put({ type: 'FETCH_SUCCESS', data: data })

3. takeEvery

  • 用途: takeEveryエフェクトは指定されたアクションタイプがディスパッチされるたびに特定のタスク（サガ）を実行するために使用されます。
  • 動作: アクションタイプと実行するサガをtakeEveryに渡すと、そのタイプのアクションがディスパッチされるたびにサガが呼び出されます。
  • 例: yield takeEvery('FETCH_REQUEST', fetchUserDataSaga)

これらのエフェクトは、非同期処理やイベントのリスニング、アクションのディスパッチなど、Redux-Sagaを使用した複雑な処理の管理において重要な役割を果たします。エフェクトを使用することで、非同期処理の流れをより宣言的に記述し、読みやすく、テストしやすいコードを書くことができます。また、Redux-Sagaのミドルウェアがこれらのエフェクトを処理することで、ジェネレータ関数のコードはより同期的に見える形で非同期処理を記述できるようになります。

ウォッチャーサガの宣言

ウォッチャーサガの宣言はRedux-Sagaのミドルウェアに対して、通常Reduxストアの作成時に接続されるサガミドルウェアを介して行われます。ウォッチャーサガは、特定のアクションタイプを監視し、それがディスパッチされたときに特定のサガ（通常はワーカーサガ）を起動します。

ウォッチャーサガの設定とミドルウェアへの接続プロセスは以下のようになります：

1. サガミドルウェアの作成

まず、Redux-Sagaのミドルウェアを作成します。これは通常、Reduxストアの作成時に行われます。

import createSagaMiddleware from 'redux-saga';
const sagaMiddleware = createSagaMiddleware();

2. Reduxストアにミドルウェアを適用

次に、このミドルウェアをReduxストアに適用します。

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers'; // ルートレデューサーのインポート

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

3. ウォッチャーサガの定義

ウォッチャーサガは、特定のアクションタイプを監視し、関連するワーカーサガを実行するジェネレータ関数です。

function* watchFetchData() {
  yield takeEvery('FETCH_REQUEST', fetchDataSaga);
}

ここでtakeEveryは、FETCH_REQUESTアクションがディスパッチされるたびにfetchDataSagaを起動します。

4. サガミドルウェアにウォッチャーサガを登録

最後に、ウォッチャーサガをサガミドルウェアに登録（起動）します。

sagaMiddleware.run(watchFetchData);

このrunメソッドによって、指定したウォッチャーサガが起動され、Reduxストアのアクションディスパッチを監視し始めます。これにより、対象のアクションがディスパッチされると、ウォッチャーサガは関連するワーカーサガを起動し、非同期処理やその他のタスクを実行します。

このプロセスによって、Reduxアプリケーション内での非同期処理や複雑な副作用の管理がRedux-Sagaを使って効率的に行えるようになります。

動作の流れ

sagas.js:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers'; // ルートレデューサーのインポート
import rootSaga from './sagas'; // ルートサガのインポート

// サガミドルウェアの作成
const sagaMiddleware = createSagaMiddleware();

// ストアの作成
const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

// サガミドルウェアの実行
sagaMiddleware.run(rootSaga);

export default store;

  1. サガミドルウェアの作成と適用: Reduxストアの設定ファイル（通常はstore.js）において、まずサガミドルウェアを作成し、Reduxストアに適用します。

  2. ストアの作成: Reduxストアが作成され、サガミドルウェアがストアに組み込まれます。

  3. サガミドルウェアの実行: sagaMiddleware.run(rootSaga)が呼び出されると、ルートサガ（またはウォッチャーサガ）が起動されます。

  4. ウォッチャーサガの開始: ウォッチャーサガは、特定のアクションタイプを監視し、それに応じてワーカーサガや他のサガを起動します。

サガのポーリング

ウォッチャーサガは、Reduxストアのアクションを監視するために「ポーリング」のような動作をします。ただし、リテラルな意味でポーリング（定期的にチェックする）を行うわけではなく、Reduxのディスパッチメカニズムを通じて特定のアクションが発生した際に反応します。これにより、非同期処理や特定の副作用を効率的に管理できます。

たとえば、takeEveryエフェクトを使用するウォッチャーサガは、指定されたアクションタイプがディスパッチされるたびに関連するワーカーサガを起動します。これにより、アプリケーション全体で発生する特定のアクションに対して一貫した反応を提供できます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1