web-dev-qa-db-ja.com

コンポーネントからディスパッチされたときのreduxアクションは「機能ではありません」

CSVアップロードでアプリを作成しようとしています。 CSVがアップロードされると、状態が変更され、CSVからJSONに解析されて処理されます。アイデアは、ファイルをアップロードして状態を更新することです。その状態が更新されたら、CSVをMeteor.methodに渡して、JSONに解析します。 Meteor、ReactおよびReduxを使用しています。アップロード、アクション、およびレデューサーを処理するコンポーネントがあります。すべてのファイルは以下のとおりです-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がアクションであり、インポートされているのに「関数ではない」理由がわかりません。誰かが手を貸してくれるなら、私はそれをいただければ幸いです。

ありがとう！

reactjsreduxdropzone.jsreact-reduxredux-thunk
9
Brandon Baum

RenderメソッドでfileUploadという引数を定義したからです。 renderメソッドで定義したすべての引数を削除します。このクラスには、インポートされたすべてのモジュールに対するクロージャースコープがあるため、クラス内のどこからでもそれらを参照できます。

2
Cooper Buckingham

見逃しやすいこの問題の1つの理由は次のとおりです。

デフォルトのエクスポートと名前付きexportでコンポーネントクラスを定義すると、次のようになります。

// 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（）を正しく使用するためにコンポーネントを呼び出すときは、デフォルトのエクスポート（中括弧なし）をインポートしてください

9
Ahmed Elkoussy

アプリケーションを再起動します

アプリケーションを再起動し忘れただけで同じ問題が発生しました。すべてのReduxアクションは最初の状態でセットアップされているため、Reduxストアは私が新しい関数を実装したことを知りませんでした。

これが誰かを助けることを願っています。

3
Vadim

誰かの役に立つ場合は、TypeError: this.props.setCategories is not a functionsetCategoriesの値がコールバックであることに気付くまで：

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

BindActionCreatorsに新しいインポートを追加したときにこの問題が発生し、{}の代わりに[]でラップしたので、括弧を確認してください

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

インポートされた要素は、インポート時に大文字と小文字が区別されないようです。これが私にとっても同じ問題の原因です。

0
William