web-dev-qa-db-ja.com

redux-sagaを使用した非同期API呼び出し

私はヘルパーで redux-saga documentation をフォローしていますが、これまでのところかなり簡単に思えますが、APIコールの実行に関して問題に遭遇しました（ドキュメントポイントへのリンクが表示されます）そのような例に）

説明されていないApi.fetchUserの部分があります。したがって、 axios または superagent ？のようなライブラリで処理する必要があるかどうかは静かに理解できません。またはそれは何か他のものです。 call, putなどのようなサガ効果はありますか？get, postと同等のものですか？もしそうなら、なぜ彼らはそのように命名されていますか？基本的に、URL example.com/sessionsでAPIに簡単なポストコールを実行し、{ email: 'email', password: 'password' }のようなデータを渡す正しい方法を見つけようとしています。

javascriptapireactjsreduxredux-saga
24
Ilja

Api.fetchUserは関数です。apiajax呼び出しを実行し、promiseを返す必要があります。

あなたの場合、このプロミスはユーザーデータ変数を解決するはずです。

例えば：

// services/api.js
export function fetchUser(userId) {
  // `axios` function returns promise, you can use any ajax lib, which can
  // return promise, or wrap in promise ajax call
  return axios.get('/api/user/' + userId);
};

それからサガです：

function* fetchUserSaga(action) {
  // `call` function accepts rest arguments, which will be passed to `api.fetchUser` function.
  // Instructing middleware to call promise, it resolved value will be assigned to `userData` variable
  const userData = yield call(api.fetchUser, action.userId);
  // Instructing middleware to dispatch corresponding action.
  yield put({
    type: 'FETCH_USER_SUCCESS',
    userData
  });
}

call、putはエフェクト作成機能です。 GETまたはPOST要求になじみのあるものはありません。

call関数を使用して効果の説明を作成し、ミドルウェアにプロミスを呼び出すように指示します。 put関数は、ミドルウェアにアクションをストアにディスパッチするよう指示する効果を作成します。

45
1ven

call、put、take、raceなどは、エフェクト作成機能です。 Api.fetchUserは、API要求を処理する独自の関数のプレースホルダーです。

LoginSagaの完全な例を次に示します。

export function* loginUserSaga() {
  while (true) {
    const watcher = yield race({
      loginUser: take(USER_LOGIN),
      stop: take(LOCATION_CHANGE),
    });

    if (watcher.stop) break;

    const {loginUser} = watcher || {};
    const {username, password} = loginUser || {};
    const data = {username, password};

    const login = yield call(SessionService.login, data);

    if (login.err === undefined || login.err === null && login.response) {
      yield put(loginSuccess(login.response));
    } else {
      yield put(loginError({message: 'Invalid credentials. Please try again.'}));
    }
  }
}

このスニペットでは、SessionServiceは、APIへのHTTPリクエストを処理するloginメソッドを実装するクラスです。 redux-saga callはこのメソッドを呼び出し、データパラメーターを適用します。上記のスニペットでは、呼び出しの結果を評価し、loginSuccessを使用してloginErrorまたはputアクションを適宜ディスパッチできます。

サイドノート：上記のスニペットは、USER_LOGINイベント、ただしLOCATION_CHANGE起こります。これは、raceエフェクト作成者のおかげです。

5
VanDanic