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); 
};