2実践的なFluxの勉強するためになにかいいサンプルコードないかと漁っていたら、KriaSoftがGithub上で公開しているreact-starter-kitが自前でReact.jsでのページネーションを実装してたりいろいろと参考になったのでコードリーディングしてみました。Flowとモダンなツールが全部入りなので、あらゆる方面から勉強になりました。これから貼るコードは抜粋なので、ソースコードを落としてエディタで見るかDevelopmentToolを実行しながら確認した方が良いかと思います。</body></html>まずはindex.htmlから。GoogleAnalyticsのコードなどを除けばこれだけ。bodyは変数となっており、ここはserver側で定義しています。res.send(html);});サーバ側はexpressで動作しています。ReactのComponentであるAppを定義し、renderToStringで描画しています。Isomorphic感が出ています。}実際にbody部に描画されるのはApp.jsのrender内に定義されています。ページネーションを実現しているhandleClickもこのApp.jsで定義されています。}根幹は最後にあるAppActions.loadPageで、その前のif文は対象としないリンクを弾くためのガード節です。休憩Actionが出てきたので、Fluxについておさらいしておきます。あるFluxのフローをまとめた図です。今見てきたところはViewの部分で、これからViewからのイベントハンドリングを管理するAction、各Storeにメッセージを発信するDispatcher、データを管理するStoreへと流れていきます。コードリーディングする際にも、一連の流れに沿っているFluxの考え方の恩恵が受けられますね。}App.jsから呼んでいたloadPageの抜粋です。Dispatcher.handleViewActionを呼んだ後に、サーバへGETでリクエストし遷移先のbodyを受け取り、Dispatcher.handleServerActionを呼んでいます。サーバ側より先にシンプルなDispatcherのコードを見てみます。}});Dispatcherの仕事は単純で、各StoreにActionからの通知を横流しします。ここでは、Serverからのデータか、Viewからのデータかでメソッドを使い分けています。Dispatcherはpayloadと呼ばれるオブジェクトでactionオブジェクトをラップし、データ元などの情報を付加してdispatchメソッドでStoreへ通知します。Storeで通知を受ける前に、Actionから呼んでいたサーバ側の処理を覗いてみます。res.send(page);});ページのbodyを返すサーバのAPIでは、なんとStoreのコードを呼んでいました。},...AppStoreのgetPageでは、与えられたパスに対するオブジェクトを返しています。存在しないパスに対するハンドリングも行っており、ここでルーティングの役目を担っています。サーバ側はこれで終わりなので、StoreがDispatcherからの通知を受けたところから再開します。}});AppStoreの下部の方でDispatcher.registerを実行しており、これによりDispatcherからのdispatchメソッドによって通知が受け取れるようになっています。通知を受けた後に処理をしているのはActionTypesがLOAD_PAGE、つまりAppActionのloadPageメソッドからの通知を受けた時で、かつPayloadSourcesがVIEW_ACTION以外、つまりSERVER_ACTIONの時ですね。trueと代入していますが、この変数を実際に使っている箇所はありませんでした。)AppSotreのpagesオブジェクトに、パスと対応するbodyの情報をセットし、emitChangeを呼んでStoreの仕事は終わりです。},emitChange内部ではただEventEmitterのemitを呼んでいるだけですね。後はViewがStoreからの通知を受け取ってレンダーするだけ...かと思っていたのですが、このサンプルではView側でStoreの通知を監視していませんでした。そこで、まだ解説していなかったコードを見ていきます。});handleClick内でAppActions.loadPageを実行後、コールバックでAppActions.navigateToを実行しています。},AppActionsのnavigateToでは、pushState/replaceStateで履歴を操作していました。その後はactionTypeをActionTypes.CHANGE_LOCATIONとしてDispatcher.handleViewActionを実行しています。});}と、app.jsのrunメソッドの中でDispatcher.registerを呼んでいました。この後はCloneされたAppのrenderが呼ばれ、ここで描画が完了します。最後のここの部分に関しては、Fluxに従うのであればStoreから通知を受けたViewで処理するのではないのかと思いましたが、アプリケーション全体に関わる部分だからapp.jsで処理をしているとかでしょうか。ちなみに、App.js内でpopstateをaddEventListenerすることでブラウザバックにも対応していました。ルール和訳2018年を振り返る検索はてなブログをはじめよう!Peranikovさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。