読者です 読者をやめる 読者になる 読者になる

dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

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

React Redux 書籍

WEB+DB PRESS Vol.97

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 として渡すことができる。
この目的で子コンポーネントにする方法は今まで知らなかった。