reactTweetはじめにこんにちは。皆さんはReact使われてますでしょうか?今回はReactとFluxについて書きます。詳しくはこちらに書いていますが、MVCでアプリを作った場合は、ModelとViewの間で双方向のデーターフローが作られる可能性があるので理解したりデバックするのが難しくなります。子のViewでなにかアクションを起こした結果、親のViewにも変更を伝えてなににかをする場合、子のViewに親のViewのコールバック関数を渡す必要があります。子のViewの下にさらに、子のViewがあって、アクションが起こった時に親のViewに伝えようとするとコールバックが深くなって複雑になってしまいます。Fluxそれを解決できる方法としてFluxです。Fluxを使うとデーターフローが一方向になります。やってることはObserverパターンです。Fluxを実現するのに使うライブラリFluxの実装自体は自前で実装してもそこまで大変ではないですが、Fluxフレームワークは何種類か出ています。自分が調べた限りだと、現状はこのフレームワークが凄く使われてて、特にいいというのがなさそうだったので、今回は本家のFacebookのFluxを使います。Reacthttps://github.com/facebook/reactViewとして使います。Fluxhttps://github.com/facebook/fluxDispatcherがライブラリとして使えるので使います。EventEmitter3https://github.com/primus/eventemitter3StoreからViewに更新があったことをイベントとして通知するのに使います。events.EventEmitterと同じように使えます。EventEmitter2は高速化とブラウザでも使えるようにしたもので、EventEmitter3はさらに高速化したライブラリです。}}まずユーザーがフォームにテキストを入力して、+のボタンを押した時にonClickでItemActionsのcreateが呼ばれます。ItemActions(Dispatcher);ItemActionsのcreateはthis.dispatcherにデーターを渡します。今回の場合はサーバーにデーターを保存しないので直接ですが、APIを叩いてサーバーにデーターを保存する場合は、Ajaxの成功した時のコールバックでthis.dispatcherを呼ぶように使います。Dispatcher();Dispatcherの実装はFluxのものを使うので、インスタンスを作るだけですみます。ItemStore(Dispatcher);ItemActions.createでdispatchされたデーターを受けます。invokeOnDispatchの中でcreateの場合はthis.state.itemsにitemを一つ追加してstateが変わったことをthis.emitChange()で通知します。}}ItemStoreでemitChangeした時に呼ばれるItemStore.addListenerにonChangeを登録しておきます。onChangeではthis.setStateでStoreから取得したデーターを元にReactがViewをレンダリングします。ここまでがユーザが操作した結果をもとに画面の表示が変わる一通りのフローです。データフローも一方向にできました。リポジトリhttps://github.com/f96q/react-flux-sample最後に今回は説明する都合上、最小のコードをサンプルを載せましたが、実際のWebアプリのサンプルとしては、リモートでふりかえりができるWebサービスのKPTBoardを最近、ReactとFluxで書き換えましたので興味がある方は参照下さい。https://github.com/f96q/kptboard宣伝DocBaseは情報共有を活発にしてチームが力を最大限発揮できるようにと思って作ったサービスです。今回の記事で書いたように試行錯誤を繰り返して作っています。弊社のような開発をする組織には便利に使えるように作っていますので、ぜひ試してみてください。posts.前の記事受託開発しながら自社サービスを作る時に工夫したこと次の記事Electronを使ってJavaScriptでデスクトップアプリ...「いいね!」で応援よろしくお願いします!このエントリーに対するコメントコメントはまだありません。date*日本語が含まれない投稿は無視されますのでご注意ください。fax.0422-26-9781お問い合わせはこちらからどうぞ。