2016-03-29 22 views
1

2つの異なるAPIにリクエストを行いたいとします。私はそのデータを整理する必要があります。私はredux-promiseを使用しています。React Reduxを使用した複数のAJAXリクエスト

現在、私は機能を持って、AJAX要求を行う他の二つの機能を呼び出します。

export function fetchEstimates(input) { 
    let firstRequest = fetchFirstRequest(input); 
    let secondRequest = fetchFirstRequest(input); 

    return { 
    type: FETCH_DATA, 
    payload: { 
     firstRequest: firstRequest 
     secondRequest: secondRequest 
    } 
    } 
} 

を残念ながら、オブジェクト内の両方の要求を置くことによって、私は結果にアクセスできないようです。

export default function(state = [], action) { 

    switch (action.type) { 
    case FETCH_DATA: 
     // console.log(action.firstRequest); 
     // console.log(action.secondRequest); 
     return result; 
    } 
    return state; 
} 

私はdevのツールでオブジェクトを切り替えるように、私はこれに来る:

[[PromiseStatus]]:"resolved" 
[[PromiseValue]]:Object 

私はオプションをトグルし続けることができますが、私は自分のコードでそれらにアクセスするように見えることはできません。

私のペイロードであれば、私はちょうど私が問題を持っていないこの

payload: firstRequest 

を返します。もちろん、私は両方の要求が必要です。何か案は。これを処理するための良いアプローチは何ですか?

答えて

0

Promise(たとえばredux-thunkなど)を処理するためのミドルウェアが必要です。約束が完了したら、Promise.allが解決されるまで待つようにしてください。コード例が必要な場合はお知らせください。

+0

ええと、コード例がありますか?それはredux-thunkでこれをする必要がありますか?私は自分のコードでサンクを使用しても構いませんが、redux-promiseが何らかの制限のためにこれを処理できない場合、私はちょうど興味があります。 – jro

1

source for redux-promiseを見ると、アクションの「ペイロード」フィールドとして約束していることが前提となっていることがわかります。代わりに、 "payload"の下のサブフィールドとして2つの約束を持つオブジェクトを提供しています。私はあなたが本当に両方の約束を解決し、両方の結果を還元人に渡すことに本当に関心があると仮定しています。 Promise.allを使用して、元の約束事の両方の結果を引数として受け取った新しい約束事を作成し、その約束事をペイロードとして使用したいとします。減速機は、{type : "DATA_RECEIVED", payload : [response1, response2]}のようなものを受け取るでしょう。

関連する問題