[英]Redux thunk not resolving before next action + then is not a function or dispatch undefined
一直在研究react / redux应用程序,我一直在这个动作上撞到墙上。
问题 - 我正在使用wzywyg编辑器更新文件。 当我上传照片时,应用程序会尝试在操作处理完图像之前插入图像。 因此,导致图像url未定义。 当我上传第二张图像时,插入第一张图像,依此类推。
很明显,在调用下一个动作之前,thunk没有解析。
更多细节
现在,我得到了相同的错误模式,即调度未定义,然后不是函数。 我错过了什么?
addUploadToDocument(...).then is not a function
Uncaught TypeError: Cannot read property 'then' of undefined
我可以确认以下内容: - Redux-thunk设置正确。 它正在我们的生产版本中工作和解雇。 - 正在从我的组件调用该操作。 只是不确定是否发送。 我可以成功上传图像,但在解决操作之前会启动回调。
这是我的行为代码:
// actions.js
// thunk
export function loadImage(document, file) {
return (dispatch, getState) => {
return dispatch(addUploadToDocument(document, file))
.then(() => {
console.log('Thunk is loaded.. chyeah.');
var uploads = this.props.uploads
var image = uploads[uploads.length - 1]
ReactSummernote.insertImage(image.previewURL, $image => {
$image.css("width", Math.floor($image.width() / 2));
$image.attr("alt", image.name);
});
});
}
}
//image processing action
export function addUploadToDocument(document, file) {
return (dispatch, getState) => {
//const position = getState().bodyEditorSelection.index
const base64Reader = new FileReader()
base64Reader.addEventListener('load', function() {
const base64 = base64Reader.result.replace(/data:.*?base64,/, '')
const key = Math.random().toString(36).substring(7)
const destination_path = `/uploads/${document.name}/${key}-${file.name}`
return dispatch({
type: DOCUMENT_ADD_UPLOAD,
payload: {
path: destination_path,
type: file.type,
base64: base64,
name: document.name,
previewURL: window.URL.createObjectURL(file),
//position: position
}
})
})
base64Reader.readAsDataURL(file)
}
}
这是我的组件。
handleImageUpload (files, editor, welEditable) {
var file = files[files.length -1];
this.props.loadImage(this.props.document, file)
}
render() {
this.syncBodyEditorState()
this.state = this.state || {}
return (
<ReactSummernote
value={this.props.body}
options={{
height: 750,
dialogsInBody: true,
toolbar: [
["style", ["style"]],
["font", ["bold", "underline", "clear"]],
["fontname", ["fontname"]],
["para", ["ul", "ol", "paragraph"]],
["table", ["table"]],
["insert", ["link", "picture", "video"]],
["view", ["codeview"]]
]
}}
onImageUpload={this.handleImageUpload}
onChange={this.handleChange}
/>
)
}
}
function mapStateToProperties(state) {
const currentDocument = currentDocumentSelector(state).currentDocument
return {
document: currentDocument,
bodyEditorSelection: state.bodyEditorSelection,
body: currentDocument.content.body,
uploads: currentDocument.content.uploads
}
}
export default connect(mapStateToProperties, {
SummernoteEditor,
updateDocumentBody,
updateBodyEditorSelection,
addUploadToDocument,
loadImage
})(SummernoteEditor)
我错过了一些微不足道的事情吗? 我看了几十个例子,thunk让我难过!
在此先感谢您的帮助。
现在您addUploadToDocument
函数不返回一个承诺,尽管这个你.then
您的dispatch
方法(和它只是返回一个普通的对象一个thunk)。 如果你需要继续,你可以将addUploadToDocument
函数的内容包装在一个promise中,然后它就可以了。 这里有一些不同的方法,一些refractoring让你开始(假设'load'事件只能发生一次):
export function loadImage(document, file) {
return (dispatch, getState) => {
const base64Reader = new FileReader();
const promise = new Promise((resolve, reject)=> {
base64Reader.addEventListener('load', resolve)
})
.then(()=> {
const base64 = base64Reader.result.replace(/data:.*?base64,/, '')
const key = Math.random().toString(36).substring(7)
const destination_path = `/uploads/${document.name}/${key}-${file.name}`
dispatch({
type: DOCUMENT_ADD_UPLOAD,
payload: {
path: destination_path,
type: file.type,
base64: base64,
name: document.name,
previewURL: window.URL.createObjectURL(file),
//position: position
}
})
})
.then(()=> {
console.log('Thunk is loaded.. chyeah.');
var uploads = this.props.uploads
var image = uploads[uploads.length - 1]
ReactSummernote.insertImage(image.previewURL, $image => {
$image.css("width", Math.floor($image.width() / 2));
$image.attr("alt", image.name);
});
})
base64Reader.readAsDataURL(file);
return promise;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.