2016-08-01 6 views
0

こんにちは私はreact/redux開発環境を初めて使いました。私のapp.jsでdispatch(fetchAllPositions(selectedUserDivision))すべての内部の約束が解決される前に、約束された解決策、複数の非同期API呼び出し

を呼び出すことによってcomponentDidMountは私がthis postで提案された方法を発見し、fetchAllPositions機能がPromise.all

に2つのアクション機能をラップするとき

私は2 APIを作るしようとしているが、非同期呼び出し、

export function fetchAllPositions(division) { 
    return dispatch => Promise.all([ 
     dispatch(fetchUserPositionsIfNeeded(division)), 
     dispatch(fetchDefaultPositionsIfNeeded(division)) 
    ]) 
    .then(console.log("fetched both")) 
} 

2つのアクション関数はほぼ同じです。若干異なるAPI URLを呼び出します。

function fetchUserPositions(division) { 
    return dispatch => { 
     const url = apiOptions.server + `/api/user/position?division=${division}` 
     dispatch(requestUserPositions(division)) 
    return fetch(url, options) 
     .then(response => response.json()) 
     .then(json => dispatch(receiveUserPositions(division,json)), 
     err => console.log(err)) 

    } 
} 

export function fetchUserPositionsIfNeeded(division) { 
    return (dispatch, getState) => { 
    if (shouldFetchUserPositions(getState(), division)) { 
     return dispatch(fetchUserPositions(division)) 
    } else { 
     return Promise.resolve() 
    } 
    } 
} 

ロジックはデータを引きながら、更新のために、REQUEST...アクションが送信されることで、その後、RECEIVE...アクションは次のとおりです。shouldFetchUserPositionはブール値を返すだけの純粋な関数であり、次のようにそれらの一つが見えますデータが新しい状態に更新される準備が整ったときに送信されます。

トラブルがPromise.allはすべて今.then(console.log("fetched both"))

を行う前に来るにREQUEST1REQUEST2RECEIVE1RECEIVE2を待つ必要があるということです、それは最初の2 REQUEST.thenは2 RECEIVEのを待っていない、完成しているんですで来る。

enter image description here

私はそれがrequestUserPositions()のネストされた自然の疑いREQUESTアクションは、単純な関数であり、減速機に、それはちょうど反転するfetch()

ラップ関数内isFetchingプロパティtrueへ:

function requestUserPositions(division) { 
    return { 
    type: REQUEST_USER_POSITIONS, 
    division 
    } 
} 

この長い問題のため申し訳ありませんが、私は任意の提案をいただければと思います。

答えて

-1

これはケアレスミス

では.then()Promise.all()が行われているとして、それが同時に実行されますディスパッチ内にラップされたときにことが判明しました。

意図ディスパッチ順序が最後の発送にはthen(()=>console.logをタグ付けすることによって作成されたdispatch(fetchAllPositions(selectedUserDivision))ComponentDidMount

から行います
関連する問題