Question

我有以下代码从youtube上下载。

    var YD = new YoutubeMp3Downloader({// some parameters here });

    YD.download('UDzGLMLhy80');

    YD.on("finished", function(data) {
        console.log(data);

        return data;
    });

    YD.on("error", function(error) {
        console.log("Error");
    });

    YD.on("progress", function(progress) {
        console.log(progress);
    });

我现在想把它“外包”到一个函数中，然后在我的redux动作中调用这个函数。我为此安装了redux thunk，但我很难将redux-thunk示例转换为上面的youtube下载函数。这是我到目前为止的行动（这是错误/不起作用）：

export const downloadFromYoutube = (download) => {
  return (dispatch) => {
    var YD = new YoutubeMp3Downloader // ... like above
return YD.download('UDzGLMLhy80').then( //I hard hardcoded this for now
  response => {
    console.log("SUCCESS");
  },
  error => {
    console.log("ERROR");
    throw error
  }
);

我想我实际上可能完全没有这个，但我不确定如何异步地集成我的函数。我还想使用其他功能（YD.on（“已完成”）和YD.on（“进度”），然后相应地发出行动。对不起，如果这可能完全关闭，但是正确方向的暗示会非常感谢！

编辑：我收到以下错误：

Uncaught TypeError: Cannot read property 'then' of undefined(anonymous function) @ index.js:10(anonymous function) @ index.js:11(anonymous function) @ bindActionCreators.js:7onSubmit @ search.component.js:25
...
Uncaught (in promise) TypeError: spawn is not a function(…)

编辑：这是基于布兰登答案“

编辑后的完整动作创建者

var YoutubeMp3Downloader = require('youtube-mp3-downloader');

var YD = new YoutubeMp3Downloader({
    "ffmpegPath": "/usr/local/Cellar/ffmpeg/3.2.2/bin/ffmpeg",        // Where is the FFmpeg binary located?
    "outputPath": "/Users/dominik/Coding/youtube-downloader-papa/downloads",    // Where should the downloaded and encoded files be stored?
    "youtubeVideoQuality": "highest",       // What video quality should be used?
    "queueParallelism": 2,                  // How many parallel downloads/encodes should be started?
    "progressTimeout": 2000                 // How long should be the interval of the progress reports
});

export const downloadFromYoutube = (download) => {
    return dispatch => {
      YD.on("finished", data => dispatch({ type: "FINISHED", payload: data }));
      YD.on("error", error => dispatch({ type: "ERROR", payload: error }));
      YD.on("progress", progress => dispatch({ type: "PROGRESS", payload: progress }));

      // dispatch a "starting" action
      // dispatch({ type: "STARTING" });

      // start the download
      YD.download('UDzGLMLhy80');
     }
  };

编辑：我按以下方式调用我的操作：我有一个实现“搜索”的容器，它为该组件提供了按下按钮时调用的功能：

<Search downloadFunction={this.props.downloadFromYoutube}/>

然后在搜索组件中我做：

// Import React
import React from 'react';

// Create Search component class
class Search extends React.Component{

  constructor(props) {
   super(props);
   this.state = {
     download: ""
   };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
 }
  handleInputChange(evt) {
      this.setState({
          download: evt.target.value
      });
  }
  onSubmit(e) {
      e.preventDefault();
      /* Do something... */

      this.props.downloadFunction(this.state.download);
  }


  render() {
    // Return JSX via render()
    return (
      <div className="">
        <h1>Youtube Link</h1>
        <input className="form-control" onChange={this.handleInputChange}></input>
        <button className="btn btn-large btn-positive" onClick={this.onSubmit}>Download</button>
      </div>
    );
  }

}


// Export Search
export default Search

Answer 1

类似的东西：

{{1}}

React / Redux异步操作

1 个答案: