从组件分派时，redux操作“不是函数”

Question

我正在尝试创建具有CSV上传功能的应用。上载CSV时，它将更改状态，然后我将CSV解析为JSON并对其进行处理。这个想法是上传文件并更新状态。状态更新后，我会将CSV传递给Meteor.method以解析为JSON。我正在使用Meteor，React和Redux。我有一个处理上传的组件，一个操作和一个reducer。所有文件都在下面-我是Meteor，React和Redux的新手，我一生都无法弄清楚为什么它不起作用。我认为我没有完全理解我要完成的工作。欢迎任何建议。

错误-未捕获的TypeError：fileUpload不是函数UploadCSV.jsx

// ACTIONS - fileUpload.js
export default function fileUpload(file) {
  return {
    type: 'FILE_UPLOAD',
    file
  };
}



//REDUCERS - upLoad.js
export default function upLoad(state = 'NO_FILE', action = {}) {
  switch (action.type) {
    case 'FILE_UPLOAD':
      return action.file;
    default:
      return state;
  }
}



//COMPONENTS - UploadCSV.jsx
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Dropzone from 'react-dropzone';
import { RaisedButton } from 'material-ui';
import { Colors } from 'material-ui';
import fileUpload from '../actions/fileUpload.js';
import { uploadCSV } from '../actions/uploadCSV.js';

class UploadCSV extends Component {
  render( dispatch, file, fileUpload ) {
    const onDrop = (file) => {
      console.log(file);
    }
    const upLoad = () => {
      this.props.dispatch(fileUpload(file));
    };
    return (
      <div>
        <Dropzone accept="csv"
                  onDrop={ () => {
                      return upLoad();
                    }}>
          <div>Click or drop files here.</div>
        </Dropzone>
      </div>
    )
  }
}

export default connect()(UploadCSV);

我不明白为什么fileUpload是“不是一个函数”，如果它是一个动作并且正在导入。如果有人可以伸出援手，我将不胜感激。

谢谢！

Answer 1

容易忽略此问题的原因如下：

如果我们使用默认导出和命名导出定义组件类，如下所示：

// named export
export class MyComponent extends React.Component{      
.......
function mapDispatchToProps(dispatch){
    return bindActionCreators({reduxAction},dispatch)
}
// default export
export default connect(null,mapDispatchToProps)(MyComponent); 

然后，我们应该导入默认导出而不是命名导出：

这将导入默认导出并可以与redux一起正常使用

import MyComponent from "./thePath"

这将导入命名的导出，并且无法与redux一起使用

import {MyComponent} from "./thePath"

原因

渲染组件时，我们必须导入默认导出，以便使用我们已导出的redux connect（）高阶函数。

有时，如果您仅依赖于编辑器的自动导入，它将导入命名的导出（没有redux连接），因此会出现该错误

底线

调用组件以正确使用redux connect（）时，请确保导入默认导出（不带花括号）

Answer 2

因为您在渲染方法中定义了一个名为 fileUpload 的参数。删除您在渲染方法中定义的所有参数。该类对所有这些导入的模块具有闭包作用域，因此您可以在类中的任何位置引用它们。