Question

我正在尝试将redux-file-upload库添加到redux应用程序中。

在我的组件中，我只是添加从lib导出的组件。

我可以看到商店是通过库内的context引用的。

示例代码如下，

import React, { Component } from 'react';
import { FileUpload } from 'redux-file-upload';

class Upload extends Component {
  render() {
    return (
      <FileUpload
        allowedFileTypes={['jpg', 'pdf']}
        dropzoneId="fileUpload"
        url="/api/path/action"
      >
        <button> Drag or click here
        </button>
      </FileUpload>
    );
  }
}

export default Upload;

然而我收到错误

Uncaught TypeError: dispatch is not a function

有什么想法吗？猜猜导入组件是个错误。

Answer 1

未捕获的TypeError：dispatch不是函数

由于不同的原因，我多次遇到此错误。我无法深入了解该库的源代码，但看起来该库无法从redux dispatch获取store函数。您是否尝试使用store方法将组件连接到redux connect()？这是一个很长的镜头。想，它可能会奏效！让我知道......

<强>更新我在这里抛出相关的链接，希望你能找到相关的代码片段。

https://github.com/reactjs/react-redux/issues/108

React with Redux? What about the 'context' issue?

https://github.com/reactjs/react-redux/issues/108

Answer 2

您需要导入'redux-form'，您的代码应该是这样的......

import React, { Component } from 'react';
import { FileUpload } from 'redux-file-upload';
import {reduxForm} from 'redux-form';

class UploadForm extends Component {
  render() {
    return (
      <FileUpload
        allowedFileTypes={['jpg', 'pdf']}
        dropzoneId="fileUpload"
        url="/api/path/action"
      >
        <button> Drag or click here
        </button>
      </FileUpload>
    );
  }
}

export default reduxForm({
  form: 'upload-form',
  fields: ['fileUpload']
})(UploadForm);

Answer 3

您是否在使用商店中间件，例如redux-thunk / redux-promise？

您正在使用的库requires it：

＆＃34;请注意 - 将调度传递给操作的中间件，例如此软件包需要redux-thunk，redux-promise-middleware 工作正常。＆＃34;

因此，如果您使用的是react-redux，则提供商yuo可以执行以下操作：

import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import promise from 'redux-promise'

const storeWithMiddleware = applyMiddleware(promise)(createStore);

派遣不是一种功能

3 个答案: