javascript-Redux thunk在下一个动作之前无法解析,则不是函数或未定义的调度

一直在使用react / redux应用程序,在此操作中,我一直把头撞在墙上.

问题-我正在使用wzywyg编辑器更新文件.当我上传照片时,应用程序会尝试在操作完成图像处理之前插入图像.因此,导致图片网址未定义.当我上传第二张图片时,将插入第一张图片,依此类推.

很明显,在调用下一个动作之前,thunk无法解析.

更多细节

>我的应用程序中有一个文本编辑器(summernote-react).用户上传图像时,onImageUpload会触发并触发handleImageUpload.
>从那里,我通过mapStatetoProps调度一个动作,并处理了图像以进行上传.
>处理完图像后,应返回编辑器并将图像路径嵌入编辑器中进行预览.

现在,在调度未定义,然后又不是函数的过程中,我遇到了相同的错误模式.我想念什么？

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)

我错过了一些琐碎的事情吗？我看了几十个例子,笨拙让我难过！

先谢谢您的帮助.

解决方法:

现在,尽管您这样做了,您的addUploadToDocument函数仍未返回promise,然后使用了dispatch方法(它只是返回普通对象的thunk).如果需要继续操作,可以将addUploadToDocument函数的内容包装在Promise中,然后可以使用.这是一个有点不同的方法,需要一些折磨才能使您入门(假设“加载”事件只能发生一次)：

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

标签：reactjs,redux,redux-thunk,summernote,javascript
来源： https://codeday.me/bug/20191118/2026600.html