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

Question

私はヘルパーのredux-saga documentationをフォローしていますが、これまでのところはまっすぐに見えますが、api呼び出しを実行すると問題に遭遇しました（ドキュメントポイントそのような例に）

説明されていない部分Api.fetchUserがあり、したがって、私はそれは我々がaxiosまたはsuperagentのようなライブラリを処理するために必要なものであれば理解して静かにしていませんか？それとも何か他のものです。そして、call, putなどのサガ効果があります。get, postの等価物ですか？もしそうなら、彼らはなぜそのように名付けられましたか？基本的に私は、URL example.com/sessionsで私のAPIへの単純なポスト呼び出しを実行し、それを{ email: 'email', password: 'password' }

Answer 1

Api.fetchUserなどのデータを渡すための正しい方法は、APIのAJAX呼び出しを実行する必要があり、それは約束を返すべき関数であり、把握しようとしています。

あなたの場合、この約束はユーザーデータ変数を解決するはずです。例えば

：

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が効果クリエーター関数である：

// 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); 
}; 

次にサーガあります。彼らはGETまたはPOST要求に精通した何かを持っていません。

callミドルウェアに約束を呼び出すように指示する効果記述を作成するために関数を使用します。 put関数は、ストアにアクションをディスパッチするミドルウェアに指示するエフェクトを作成します。

Answer 2

は、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はこのメソッドを呼び出し、dataパラメータを適用します。上記のスニペットでは、結果を評価し、putを使用してloginSuccessまたはloginErrorのアクションを適切に送信できます。

サイドノート：上のスニペットはLOCATION_CHANGEが発生したときに、USER_LOGINイベントを継続的にリッスンするloginSagaです。これはraceエフェクトクリエイターのおかげです。