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

【问题标题】：redux action "is not a function" when dispatched from component从组件分派时，redux 操作“不是函数”
【发布时间】：2016-08-03 22:08:06
【问题描述】：

我正在尝试使用 CSV 上传创建应用。当上传 CSV 时，它会改变状态，然后我会从 CSV 解析为 JSON 并用它做一些事情。这个想法是上传文件并更新状态。一旦该状态更新，我会将 CSV 传递给 Meteor.method 以解析为 JSON。我正在使用 Meteor、React 和 Redux。我有一个处理上传、一个动作和一个减速器的组件。所有文件都在下面——我是 Meteor、React 和 Redux 的新手，我终其一生都无法弄清楚为什么这不起作用。我不认为我完全理解我想要完成的事情。欢迎提出任何建议。

错误 - 未捕获的类型错误：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 是一个动作并且正在被导入，我不明白为什么它“不是一个函数”。？如果有人能伸出援手，我将不胜感激。

谢谢！

【问题讨论】：

标签： reactjs redux dropzone.js react-redux redux-thunk

【解决方案1】：

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

【讨论】：

谢谢 - 修复了它。我看到了一个较旧的 react/redux 示例，其中 reducer 函数被传递到组件中，但它在当前的 'render()' 语法之前。那就是我出错的地方。

【解决方案2】：

导入元素时似乎不区分大小写。这也是我遇到同样问题的原因，所以请注意。

【讨论】：

【解决方案3】：

重新启动您的应用程序

我只是因为忘记重新启动我的应用程序而遇到了同样的问题。所有的 Redux 操作都是在第一个状态下设置的，所以 Redux Store 不知道我实现了一个新功能。

希望这对某人有所帮助。

【讨论】：

【解决方案4】：

我在向 bindActionCreators 添加新导入时遇到了这个问题，而不是 { } 我用 [ ] 包装了它，所以检查你的括号

function mapDispatchToProps(dispatch) {
  return bindActionCreators({...UserActions, ...ModalActions}, dispatch)
}

【讨论】：

【解决方案5】：

这个问题很容易被忽略的一个原因如下：

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

// 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()

【讨论】：

感谢你们的cmets，它让我很头疼。我以为我没有正确设置我的连接功能，但它是父组件上的组件导入。

【解决方案6】：

如果它对任何人有帮助，我收到了TypeError: this.props.setCategories is not a function，直到我注意到setCategories 的值应该是一个回调：

const mapDispatchToProps = dispatch => {
    return {
        setCategories: dispatch(actionCreator.setCategories()),  // cause of error
        onAgeUp: () => dispatch(actionCreator.ageUp(1)),
        onAgeDown: () => dispatch(actionCreator.ageDown(1))
    };
};

【讨论】：