Reduxのアクションクリエイターでのハンドルのフェッチ方法

Question

Reduxドキュメントは、AJAXリクエストごとに3つの異なるアクションを持つことを推奨しています。ログインのために例えば、彼らは次のようになります。

• LOGIN_REUQEST
• LOGIN_FAILURE
• LOGIN_SUCCESS

しかし、私はfetchによってスローされる可能性がすべてのエラーをキャッチして問題を抱えています。 Reduxのドキュメントで 私はこの例が見つかりました：

return fetch(`https://www.reddit.com/r/${subreddit}.json`) 
    .then(
    response => response.json(), 
    // Do not use catch, because that will also catch 
    // any errors in the dispatch and resulting render, 
    // causing an loop of 'Unexpected batch number' errors. 
    // https://github.com/facebook/react/issues/6895 
    error => console.log('An error occured.', error) 
) 
    .then(json => 
    // We can dispatch many times! 
    // Here, we update the app state with the results of the API call. 

    dispatch(receivePosts(subreddit, json)) 
) 

}

をしかし、私はそれにいくつかの問題を参照してください：それはキャッチを使用していない

1. 、それは文句を言わないAJAXの問題をキャッチしてユーザー側のリクエスト（例：インターネットなし）
2. ステータスが！= 200のレスポンスは処理されません。

私はこのコードこれを終わったが、（問題リアクトのために - 上記のコード内のコメントを参照）をまだそれはケース＃1を処理しません。

fetch('/api/auth/signin', {...}), 
     headers: { 
      'Content-Type': 'application/json', 
      'Accept': 'application/json, text/plain, */*', 
     } 
    }) 
    .then (response => 
     response.json().then(json => { 
      if (response.ok) { 
       dispatch(loginSuccess(json)) 
      } else { 
       dispatch(loginFailure(json.errMsg)) 
      } 
     }) 
    ) 

あなたは私のすべての可能なハンドルの任意の例をお願いできますフェッチを使用してAJAXリクエストでエラーが発生しました。多くのチュートリアルやオープンソースプロジェクトは、それを無視しています。

Answer 1

オフラインエラーを処理するために.catch()は必要ありません。エラーコールバックである.then()の2番目の引数はオフライン（インターネット接続なし）のエラーを捕捉します。

そして、200でない応答を処理するのは簡単です：

fetch({...}) 
.then(
    response => { 
    if (response.status !== 200) { 
     dispatch(loginFailed(response.json())); 
     return Promise.reject(); 
    } else { 
     return response.json(); 
    } 
    }, 
    error => { 
    dispatch(loginFailed(error.json())); 
    return Promise.reject(); 
    } 
) 
.then(json => { 
    dispatch(loginSuccess(json)); 
}); 

Answer 2

async function fetchLists(url, token, userName, etag, dataToUpdate) { 
var responseJSON; 
try { 
    let response = await fetch(url, 
     { 
      method: 'GET', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
       'X-Access-Token': token, 
       'X-Key': userName, 
       'If-None-Match': etag 
      } 
     } 
    ); 
    switch (response.status) { 
     case 200: 
      var data = await response.json(); 
      var dataType = getListForUpdate(dataToUpdate); 
      responseJSON = { 
       action: dataType, 
       message: UPDATE_DATA, 
       response: response, 
       responseJSON: data 
      } 
      break; 
     case 304: 
      var dataType = getListUptoDate(dataToUpdate); 
      responseJSON = { action: dataType, message: DATA_UPTO_DATE }; 
      break; 
     case 404: 
      responseJSON = { message: NOT_FOUND }; 
      break; 
     case 500: 
      responseJSON = { message: SERVER_ERROR }; 
      break; 
     case 401: 
     case 402: 
      responseJSON = { message: INVALID_CREDENTIALS }; 
      break; 
    } 
    // console.log(response); 
} catch (err) { 
    // console.log(err); 
    responseJSON = { message: NETWORK_REQUEST_FAILED }; 
    // console.log(responseJSON); 
} 

return responseJSON; 
} 

あなたの問題を解決するかもしれないことが、このコードの構造。私はすべてのレスポンスを記録し、ネットワーク要求の失敗を捕まえました。あなたがそれを理解していないとコメントしてください。

希望します。