2016-07-12 22 views
3

私は非同期アクション非同期アクションを正しく処理する方法は?

function fetch(url) { 
    dispatch => { 
    request(url).then(
     resp => dispatch({type: FETCH_SUCCESS, resp}), 
     error => dispatch({type: FETCH_FALUIRE, error}) 
); 

} }

UIを持っているが、それらのいずれかをクリックし、それはその項目のURLとアクションを送出したときに、すべての項目を一覧表示するページがあります。

最初にitem1をクリックすると、item2の応答がitem1より早く返された場合、item2をすばやくクリックします。ストア内のitem2のデータはitem1によって上書きされます。

fetch('http://remote/items/item1'); //first 
fetch('http://remote/items/item2'); // then 

アイテム1の結果はどうやって無視できますか?またはアイテムの発送をアイテム1の後に常にトリガーできるようにするにはどうすればいいですか?

私が考えることができるものは、リクエストを送る前にURLを発送してください。

function fetch(url) { 
    dispatch => { 
    dispatch({type: FETCH_START, url}); 
    request(url).then(
     resp => dispatch({type: FETCH_SUCCESS, resp, url}), 
     error => dispatch({type: FETCH_FALUIRE, error, url}) 
    ); 
    } 
} 

還元剤では、私は応答を無視すべきかどうかを判断するためにURLをチェックします。

function reduceFetch(state = initialState, action) { 
    switch(action.type) { 
    case FETCH_START: 
     return {initialState, action.url}; 
    case FETCH_SUCCESS: 
     if (state.uri === action.url) { 
     return {state, resp: action.resp}; 
     } else { 
     return state; 
     } 
    ... 
    } 

}

あなたの助けをありがとう!

答えて

2

解決策が必要です。あなたは

  1. 要求ITEM1
  2. 要求
  3. ITEM2リクエストのようなクレイジーなものを無視した場合、少なくとももう一度ITEM1。
  4. 3番目のリクエストが戻ってきています。
  5. 最初の要求は失敗しました。または、最初の要求が戻ってきて、item1が要求の間で変更されました。

fetch機能を使用して、最新のコールでのみイベントをディスパッチすることもできます。

const fetchLatest = (called => url => { 
    const snapshot = ++called 

    return dispatch => request(url).then(
    resp => snapshot === called && dispatch(...), 
    error => snapshot === called && dispatch(...) 
) 
})(0) 
+0

ありがとうTarabanko、これは私が思ったものですが、実装方法はわかりませんでした。 – level55

関連する問題