Question

尝试将LineProgress中的下载文件Material_UI集成到React-Redux应用程序中。

GamesComponent ：
- 单击下载按钮会触发GamesAction

GamesAction ：
- dipatches致电GamesApi - 将调度返回给GamesReducer

export function downloadGame(file_url, targetPath, callback) {
  return (dispatch) =>
    GamesApi.downloadGame(file_url, targetPath, callback)
      .then((response) => {
        console.log(response)
        return dispatch({
          type: GAMES_DOWNLOADGAME,
          progress: response
        })
      })
}

GamesApi ：
- 下载文件 - 使用进度

向GamesAction返回Promise

static downloadGame(file_url, targetPath, callback) {
  return new Promise(function (resolve, reject) {

    var req = request({
      method: 'GET',
      uri: file_url
    });

    var out = fs.createWriteStream(targetPath);
    req.pipe(out);

    req.on('response', function (data) {
      total_bytes = parseInt(data.headers['content-length']);
    });

    req.on('data', function (chunk) {
      received_bytes += chunk.length;

      let progress = (received_bytes * 100) / total_bytes;
      console.log(progress)
      return resolve(progress)
    });

    req.on('end', function () {
      console.log("File succesfully downloaded");
    });
  })
}

GamesReducer ：
- 将进度存储到商店，因此组件可以抓取它并在页面上显示。

case GAMES_DOWNLOADGAME:
  return Object.assign({}, state, {
    progress: action.progress
  })

结果：
Console.log在下载时显示正确的数据但是我怎样才能将它集成到Component？

为了能够发送类似下载进度的内容，我还能使用什么代替承诺？ 1％，2％，...... 100％

这听起来很可怕，但我无法想到更好的方法。如果有人知道不同的方式或任何工作方式，请指出我的方向。感谢。

在React app下载文件

0 个答案: