
- 作者: 外村和仁,小林徹,古川陽介,佐藤歩,yoku0825,是澤太志,一野瀬翔吾,加藤颯史,のざきひろふみ,うらがみ,水嶋淳貴,久田真寛,久保達彦,伊藤直也,遠藤雅伸,ひげぽん,海野弘成,はまちや2,竹原,倉岡洋義,WEB+DB PRESS編集部
- 出版社/メーカー: 技術評論社
- 発売日: 2017/02/24
- メディア: 大型本
- この商品を含むブログを見る
特集の 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 として渡すことができる。
この目的で子コンポーネントにする方法は今まで知らなかった。