react-reduxで「dispatch is not a function」にハマった場合の対処法

Gukuです。
React.jsのReduxフレームワークを使用していて、「dispatch is not a function」というエラーに３日ほどハマったので備忘録を記述しておきます。
（このエラーの解消法が英語文献漁りまくっても無かったので。。。）
こんなのです。

エラー解消法

container部分でこんな感じで記述しているとこのエラーが起こります。

container.js

import React from 'react'
import { connect } from 'react-redux'
import AddProject from '../containers/AddProject'
import FetchProject from '../containers/FetchProject'
import { fetchProject } from '../actions/operationProject'

let OnLoadProcessing = ({ onLoadFetchProject }) => (
  <div>
    <AddProject />
    <FetchProject />
    <script type="text/javascript" language="JavaScript">
      window.onload = () => {
        onLoadFetchProject()
      }
    </script>
  </div>
)

const mapDispatchToProps = (dispatch,state) => {
  return {
    onLoadFetchProject: () => {
      dispatch(fetchProject()) //ここでエラーdispatchなんて関数ねぇえよ(´Д` )って怒られる。
    }
  }
}

OnLoadProcessing = connect(
  mapDispatchToProps
)(OnLoadProcessing)

export default OnLoadProcessing

解決法としてはこんな感じ。

container.js

import React from 'react'
import { connect } from 'react-redux'
import AddProject from '../containers/AddProject'
import FetchProject from '../containers/FetchProject'
import { fetchProject } from '../actions/operationProject'

let OnLoadProcessing = ({ onLoadFetchProject }) => (
  <div>
    <AddProject />
    <FetchProject />
    <script type="text/javascript" language="JavaScript">
      window.onload = () => {
        onLoadFetchProject()
      }
    </script>
  </div>
)

//空でも良いので、mapStateToPropsを記述
const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch,state) => {
  return {
    onLoadFetchProject: () => {
      dispatch(fetchProject())
    }
  }
}

OnLoadProcessing = connect(
  mapStateToProps, //ここでconnectするのも忘れない
  mapDispatchToProps
)(OnLoadProcessing)

export default OnLoadProcessing

これでdispatch is not a functionのエラーは解消されます(=ﾟωﾟ)ﾉ
mapStateToPropsで受け取っているstateの情報が無いとdispatchが動かない？ってことなんでしょうか？
なんか良くわかりませんが、解決したので良しとしましょう。
reduxでcontainerを作成する場合、mapStateToProps,mapDispatchToPropsをセットで必ず記述すれば良さそうですね。

おわりに

こんなエラーシラネ。土日と平日2日ぐらいこのエラーに悩まされた。
やはり、記述方法を自分スタイルにしだすとこういったエラーにはまるなと。
(reduxの機構とかまだよくわかってないし。。。)
ただ。。。ただ、これでサーバサイドへの書き込み、読み込みができるようになったので、これで一通りフロントAppは書き出せるかなっと。
辛い3週間が終わりそうです(=ﾟωﾟ)ﾉ

転載元

こちらでも掲載しております。
Gaku's Memo-react-reduxで「dispatch is not a function」にハマった場合の対処法