react-reduxでページ読み込み時、actionを呼び出す方法

Gakuです。
Reduxむずいっす。やばいっす。楽しいっす(´Д` )
ということで、ここ3日くらいはまってたページ読み込み時にactionを呼び出す方法がついにクリアできたので備忘録として残します。

ハマった内容

1.とりあえず、初期描画でデータを呼び出す方法が全くわからず(´Д` )になった。
2.onload使えばいいんじゃね？と閃く！
3.onloadで実装したもののなんか無限ループ起こる(今でも原因不明)
4.reduxにはそういう機能がないんじゃね？と思いreactの記事探し出す。
5.reactにあるcomponentDidMount()ってのが使えそうな雰囲気なのはわかったので実装しようと試みる。
6.ひたすら書き方がわからず２日はまる←本日21時まで。。。飯も食わず。。。

解決法

結局reduxのexample見て、実装したいことと同じようなコードを読んで解決した。
（ここに行き着いておけばもっと簡単に今までできた気がする。。。）
redux初学者は一度動かしてみて、コード読んで、いろいろやってみるとreduxで実装できるようになると思います。
ReduxExample

実装

containerでこんな感じに記述。

container.js

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

class ProjectList extends React.Component {
  componentDidMount() {
    const { dispatch } = this.props
    dispatch(fetchProject())
  }
  render() {
    const { projects } = this.props
    return (
      <div>
      {projects.saveResult.map(project =>
        <p key={project.id}>
          {project.projectname}
        </p>
      )}
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    projects: state.projects
  }
}

export default connect(mapStateToProps)(ProjectList)

結局componentDidMount()を使うところまでは合ってたみたい。
redux使うのに、reactの記述方法で書いていいのかな？という迷いが今回のハマりに繋がりました( ；´Д｀)

おわりに

書方にすごくこだわりたいと思っているので（たいして綺麗じゃないけど。こだわりだけ）、そのこだわりを捨てた方が良いかと思ったハマりでした。。。
ただ、reactは一歩進むと世界が広がっていくので本当楽しいです。
今回のハマり解消した時は昇天しました。

転載元

こちらでも掲載しております。
Gaku's Memo-react-reduxでページ読み込み時、actionを呼び出す方法