React/Redux异步操作
我有以下代码从YouTube上下载一些代码。React/Redux异步操作
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
像这:
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);
};
谢谢!实现这一点,我得到'未捕获的错误:操作必须是普通对象。使用自定义中间件进行异步操作。&&没有定义:'未捕获(承诺)ReferenceError:没有定义调度' –
你需要发布你如何使用这个'downloadFromYoutube'动作创建器。 – Brandon
你是什么意思?我在哪里打电话?或动作创建者文件本身? –
什么是“不工作”呢?你期望什么没有发生?只要'YD.download'返回一个承诺,但没有看到使用'dispatch'来更新redux存储,那么没有任何问题,因此不会出现明显的副作用。 –
谢谢。我不确定它是否会回复承诺。我用错误消息更新我的问题。 –