WEB+DB PRESS Vol.97のReactサンプルアプリをReduxで書き直した

WEB+DB PRESS Vol.97

特集の React 記事を読んでいます。
React/Redux でのクライアントサイドルーティングや SSR（サーバーサイドレンダリング）について学びたく、とりあえずサンプルコードが flux を使って書かれていたのを Redux を使う形に書き直した。

（PR は #1）

いじらなかった components/ 以下のコンポーネントと containers/ でファイル名の命名ルールが揃っていなかったり、container はもう少し presentational な役割と切り離した方がいいんじゃないかという気がするが
本来学びたかったことのための土台はとりあえずできた。
正直 flux の書き方になっている action や store を順次 Redux の action や reducer に置き換えていくだけで移行自体に面白味はなかった。

メモ

React Router の基本的な使い方として、

<Route path="notes/:id/edit" component={NoteEdit} />

とすると、コンポーネント側では URL 中のパラメータを this.props.params.id のようにして取得できる。

---

main.js

<Route path="/" component={Dashboard}>
  <Route path="notes/:id/edit" component={NoteEdit} />
</Route>

Dashboard.js

<div className="page-Dashboard-main" role="form">
  {this.props.children ? React.cloneElement(this.props.children, { note }) : null}
</div>

としておくと、<NoteEdit /> に Dashboard から note を作って props として渡すことができる。
この目的で子コンポーネントにする方法は今まで知らなかった。