限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。conceptsを参考にFluxについて解説したいと思います。FluxのパーツFluxには4つのパーツがあります。DispatcherStoreActionViewDispatcherDispatcherは、Actionを受け取り、Storeに伝え(Dispatch)ます。オブザーバはDispatcherの一種です。Dispatcherは1つのアプリケーション中に2つ以上作ってはいけません。RiotControlはDispatcherのみを提供します。すべてのStoreにActionが伝わるStoreStoreはアプリケーションのデータを保持します。StoreはActionを受け取るため、Observableであるべきです。StoreはAction以外で変更されるべきではありません。Storeは変更されたら、changeイベントを発行する必要があります。ActionActionは内部APIを示すデータ構造です。action.data);こういう形になっています。ViewViewはビューです。Storeのデータを表示することができます。Storeのデータを扱う場合、Storeをsubscribeしなければなりません(Storeはchangeイベントを発行するのでsubscribeするのは簡単です)。処理の流れView側でなんらかのイベント(クリックイベントやキーダウンイベント)が起きます。Dispatcherがそれを受け取り、全てのStoreへそのことを伝えます。Storeは必要があれば変更を行い、changedイベントを発行します。Viewはchangedイベントを受け取ったら変更を反映します。外部との通信を行う場合は、通信を投げて、結果をDispatcherが受け取り、Storeへ伝え、Viewがchangedイベントを受け取り、変更を反映します。簡単なカレンダーアプリを題材にFluxについて考えてみます。カレンダーアプリはヘッダ部分、ボディー部分、ディティール部分にわかれます。ヘッダ部分は「カレンダーの現在の年、月の表示」、「次の月へ、前の月へ進めるボタン」を持ちます。ボディー部分はカレンダーを表示します。ディティール部分は、ボディー部分で選択された日についての情報を表示します。StoreStoreには「現在の年、月」「選択された日」の情報を持たせればいいとわかります。Action「次の月へ」ボタンが押されたら"next-month"Actionを発行します。日が選択されたら、"select-date"Actionを発行します。このActionは選択された日のデータも持ちます。DispatcherDispatcherは適当でOKです。なんなら自前でつくることすらできます。$(this).text()});});(コードを書くのが面倒だったのでjQueryを使用しています)ViewはcalendarStoreのchangedを監視して適当に処理すればOKです。これだけのコードでカレンダーアプリが書けます。14:30Fluxとはなんぞや関連記事2016-12-29Riot.js+Redux+Immutable.jsでカレンダーアプリを作ったなんでReactじゃないのかって?Riotの方が好きだからですよ。限界を究めるブログです。までSNSTwitterGitHubHomepageBlog連載リストプライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。