Question

一直在研究react / redux应用程序，我一直在用这个动作砸墙。

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

很明显，在调用下一个动作之前，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)

我错过了一些微不足道的事情吗？我看了几十个例子，thunk让我难过！

提前感谢您的帮助。

Answer 1

现在你的addUploadToDocument函数没有返回一个承诺，尽管你.then dispatch addUploadToDocument方法（并且它只是一个返回平原的thunk）宾语）。如果你需要继续，你可以将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; } }函数的内容包装在一个promise中，然后它就可以了。这里有一些不同的方法，有一些折射可以帮助你入门（假设加载＆＃39;事件只能发生一次）：

Map<Integer, Integer> hashMap = new HashMap<>();
hashMap.put(TotalDuration[5], ResAllocRAM[1]); //put(key,value)
int value = hashMap.get(TotalDuration[5]); //it will return you value of ResAllocRAM[1]

Redux thunk在下一个动作之前没有解析+然后不是函数或调度未定义

1 个答案: