0

redux での進行状況を処理して約束するにはどうすればよいですか?

プロミスの実行中に回転するバーなどを表示したいのですが、リクエストを処理するためにaxiosを使用していますが、リクエストの構成オブジェクトで次のように進む進行状況を処理するための API があります。 

{  
   progress: function(progressEvent) {
       // Do whatever you want with the native progress event
   }
}

ただし、次のような redux アクションでのみリクエストを送信できます。

return {
    type: "HTTP_REQUEST",
    payload: axios.get("/webAPI/data", configObj)
}

これらの条件で進行イベントを処理するにはどうすればよいですか?

4

2 に答える 2

2

ガブダラの答えは正しいですが、質問への答えは部分的にしかないと思います。必要に応じて、両方の回答のコードを簡単に組み合わせることができます。

進行状況をユーザーに表示したい場合は、現在の進行状況をペイロードとして、進行状況コールバックから特定の進行状況アクションをディスパッチできます。このようなもの：

{  
   progress: function(progressEvent) {
       return dispatch({
           type: "HTTP_REQUEST_PROGRESS",
           payload: {
               url: "/webAPI/data",
               currentBytes: progressEvent.current,
               totalBytes: progressEvent.total // properties on progressEvent made up by yours truly
           }
       });
   }
}

request progress本質的には、リクエストを開始するためのアクションが既にあるのと同じように、を表す別のアクションが必要なだけです (おそらく、成功した結果と失敗した結果の両方に対して 1 つ)。

于 2016-03-15T13:00:47.363 に答える
0

プログレスバーではなくスピナーを表示するだけの場合は、プログレス関数は必要ありません。むしろ、これらの線に沿ったものをお勧めします。

const axiosAction = function(configObj) {
  // We have to thunk the dispatch since this is async - need to use the thunk middleware for this type of construct
  return dispatch => {
    /* action to notify the spinner to start (ie, update your store to have a
    loading property set to true that will presentationally start the spinner) */
    dispatch({
      type: 'AXIOS_REQUEST_STARTING'
    });
    return axios.get("/webAPI/data", configObj)
        .then(res => {
          /* action to set loading to false to stop the spinner, and do something with the res */
          return dispatch({
            type: 'AXIOS_REQUEST_FINISHED',
            payload: res,
          })
        })
        .catch(err => /* some error handling*/);
  };
}

redux-thunkへのリンクを追加するために編集

于 2016-03-15T12:52:31.057 に答える