Redux-Sagaは、APIなどの副作用を伴う非同期タスクを処理するミドルウェアライブラリです。また、佐賀の状態を読み取ってアクションを呼び出すことができます。非同期タスクを実行するためにジェネレーター関数を使用します。

以下に、佐賀を使用する理由とそのインストール方法の概要を示します。次に、APIを処理するための便利な佐賀メソッドについて説明します。

なぜRedux-Sagaを使用しているのですか？

Sagaの主な任務は、API呼び出しを処理し、エンドポイントの応答に基づいて状態を更新することです。redux-sagaの主な利点の1つは、テストに適していることです。

Redux-Sagaを使用する前に、Reduxに精通している必要があります。

Redux-sagaのインストール方法は？

パッケージマネージャーに基づいてredux-sagaをインストールする方法は2つあります。

npm install redux-saga

yarn add redux-saga

import { call, put, takeEvery } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
    try {
        const user = yield call(Api.fetchUser, action.payload.userId);
        yield put({type: "USER_FETCH_SUCCEEDED", user: user});
    } catch (e) {
        yield put({type: "USER_FETCH_FAILED", message: e.message});
    }
}

function* mySaga() {
    yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

APIは次のようになります。

import axios from 'axios';

const Api = {
    fetchUser: (userId) => {
        return axios.get(`...?userId=${userId}`)
    }
};

export default Api;

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware();

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

sagaMiddleware.run(mySaga);

佐賀メソッド

最もよく使用される方法を以下に説明します。

選択する

セレクター（状態）から読み取ります。これがselect呼び出しのサンプルです。

const userId = yield select(userSelectors.getUserId);

次に、アクションをディスパッチします。

yield put({type: "USER_FETCH_SUCCEEDED", user: user});

たとえば、APIなどの非同期関数を呼び出します。

const user = yield call(Api.fetchUser, action.payload.userId);

各アクションディスパッチを監視して、ジェネレーター関数を呼び出します。

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

これはtakeEveryと同じですが、唯一の違いは、前の通話が保留中の場合、再度通話しないことです。

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-sagaは、reduxで非同期タスクを処理するためのライブラリです。この記事では、佐賀の使用理由と使用方法、およびその方法について説明します。