React + Redux を勉強しようと試しにアプリを作成してみました。
- GeneticAlgorithm でテストベットとなる問題（ナップザック問題）を解く様子を可視化したアプリ
その時に自分なりに理解したポイントをメモ的にまとめておきます。
React
Reactは、Componentと呼ぶ独自の機能を持ったHTMLタグを作り、それを組み合わせて画面を作る。
Componentはいろいろな方法で作成できるけど、React.Componentを継承したclassと作るのが基本になる。
Componentは、stateとprops(properties)という２つのデータを使う。
stateはそのComponent内部の状態を保持するためのデータストアでこのデータを使って表示を変化させる。
このstateは直接的には変更せずComponent#setStateで更新し、これによりReactがstateの変化に応じた画面の再描画を行う。
propsは、そのComponentを使用する時に外部から渡されるデータで、コンストラクタ引数のようなもの。
値は不変でこれを直接書き換えるようなことはしてはいけない。
Componentを使うときは、HTMLタグのように記述するので、その属性がそのままporpsに渡される。
Redux
Reduxはデータの保持、更新、反映を行うタイミングを整理してデータの管理を行いやすくするフレームワーク。
よく、React + Reduxとしてワンセットで扱われているが、Redux単体でも成立しているようなのでjQuery + Reduxとかもやろうとすればできそう。
(参考: http://redux.js.org/docs/basics/Store.html#dispatching-actions)
React + Redux
React + Redux の構成はReduxでアプリ全体のデータを管理し、そのデータをReactのComponentに渡して画面に反映する。
Reactは渡されたデータ構造を使って画面を構成することに注力し、ビジネスロジックによるデータ更新はReduxのReducerが担う。
react-reduxモジュールのconnectメソッドを使って、ReduxがもつデータをReact Componentのpropsに渡すことで両者を繋ぐ。
全てのReact ComponentをReduxと繋ぐよりは、Reactで作ったビューのルートとなるComponentにのみ繋ぐような使い方がよいように思う。
ReactのComponent自体のstateと、Reduxが持つデータ構造(state。どちらもstateで呼び分けづらい)の使い分けとしては以下のイメージ。
例えば、アプリのオプション設定をオプション設定用コンポーネントとして作成したときに、オプション画面のリアルタイムの入力内容はReact stateに保持し、その後にオプション設定を[Submit]ボタンとかで確定した時点で、React stateで持っていた内容をReduxのActionを通してReduxのデータに反映する。
初期構造作成
実装するにあたって公式のチュートリアルなどが参考になる。
- React公式
- Redux公式
初期構造の作成は、create-react-appを使って初期テンプレートを作るのがよい。
- Create React App
その上で、以下のRect + Reduxのサンプルアプリを参考にファイル構造や命名構造を参考にするとよい。
- React + Reduxサンプル