React/Redux异步操作

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（“finished”）& YD.on（“progress”）），然后相应地调度行动。很抱歉，如果这可能完全关闭，但向正确的方向提示非常感谢

编辑：我收到以下错误：

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

像这：

export const downloadFromYoutube = download => dispatch => { 

    const YD = new YoutubeMp3Downloader // ... like above 

    // hook up event handlers to dispatch redux actions on activity 
    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(download); 
};