FluxライブラリAltのデータフローについて
元記事:Alt Flux Tutorial in Depth – The First Cycle
FluxライブラリにAltを使っています。もともとはRefluxをつかっていたんですけど、DefinitelyTypedに定義ファイルが無いことに気づき、すでにDefinitelyTypedに定義ファイルがあるFluxライブラリはないかな〜って探してたところ、Altを見つけた次第です。(深い理由ではない。。。)
Altのチュートリアルをみてみたんですけど、個人的に微妙にトリッキーな部分があったので、理解を深めるため、忘れないために備忘録を残しておきます。 理解が誤っている点など、ご指摘いただけるととってもうれしいです。
概要
まず、頭の中を整理する為に図示しようとしたんですけど、Alt側で 自動的に ごにょごにょしている場所とかあるので、若干初見ではソースが追いづらい印象を受けました。というのはさておき、Component
、Action
、Store
の関係は概ね下の図みたいになるかと思います。
詳細
View
まず、Locations
コンポーネントがマウントされて、componentDidMount
にてLocation
の一覧を取得する為にLocationStore.fetchLocations
が実行されます。LocationStore
のコードを見てる人なら、いつfetchLocations
なんて定義したんだ?って最初は思うでしょうけど、そこについては次節にて説明します。いったんViewで行われていることはこれだけと思ってOK。
// Locations.jsx
var Locations = React.createClass({
componentDidMount() {
LocationStore.fetchLocations();
},
render() {
// edited for brevity
}
});
Action, Dispatcher, Store
LocationStore
のfetchLocations
関数については、Alt
のexportAsync
についてわかっていないとコードを追うのが困難になります。exportAsync
で指定したSource
(今回の場合LocationSource
)で定義されている関数は、そのStore
の関数かのように使えるようになります(mixin
のようなイメージ)。この挙動についての詳細はdocsの一読をおすすめします。ちなみにこの設定はLocationStore
のconstructor
で行われています。↓
// LocationStore.js
class LocationStore {
constructor() {
// 省略
// ここでLocationSourceの関数がLocationStoreの関数として
// 公開される
this.exportAsync(LocationSource);
}
// 省略
}
以上のことから、ViewでLocationStore.fetchLocations()
が呼ばれた時は、実際にはLocationSource
のfetchLocations
が実行されます。Alt
の世界でSource
はサーバとのデータやりとりを行う場所(ajax
的ないろいろが発生する場所)になります。Source
には色々と定義があるのですが、初回サイクルで注目すべきはremote
とloading
の2つです。remote
はサーバにリクエストを投げる部分です。なのでPromise
が返却される場所になります。loading
は、fetchLocations
が呼ばれたときに発火するAction
を定義します。今回であればLocationActions.fetchLocations
を発火させることで、fetchLocations
Actionに興味がある人に通知することができるのです。
// LocationSource.js
var LocationSource = {
fetchLocations() {
return {
remote() {
// サーバ通信部分。データ取得依頼してPromiseを返却する場所
return new Promise(function (resolve, reject) {
// 省略
});
},
// 省略
// fetchLocationsの時に発火するActionの定義
loading: LocationActions.fetchLocations
}
}
}
ここまでを図示するとこんな感じに書けるかと思います。
次にLocationActions.fetchLocations
アクションが発火することで、LocationStore
のハンドラ(handleFetchLocations
)が実行されます。この中では、Location
を再取得するので既存のthis.locations
を空の配列にしています。
class LocationStore {
constructor() {
// 省略
// listening and registering event handlers
this.bindListeners({
handleUpdateLocations: LocationActions.UPDATE_LOCATIONS,
handleFetchLocations: LocationActions.FETCH_LOCATIONS,
handleLocationsFailed: LocationActions.LOCATIONS_FAILED,
setFavorites: LocationActions.FAVORITE_LOCATION
});
// 省略
//
this.exportAsync(LocationSource);
}
// 省略
handleFetchLocations() {
// fetchLocations時にはthis.locationsを空の配列に戻す
this.locations = [];
}
// 省略
}
View再び
LocationStore
のstate
(this.locations)が変わることで、AltContainer
を通してAllLocations
に新しいprops
(locations)が渡されます。AltContainerについてはAlt
を使う上ではきっと知っておかないといけない仕組みです。高階層Componentで、一番賢いComponentというイメージでしょうか(propsのエントリポイント的なポジション?)。Store
とComponent
をいい感じに繋げてくれて、Store
のstate
に変化があった場合に自動的にComponent
にpropsとして渡してくれるような仕組みです。が、かなり色々できるみたいなので、ただStore
とComponent
をつなげてくれる人っていうわけではないです。(詳細は私も勉強中。。。)
話を戻すと、AllLocations
に新しいprops
(locations
)が渡されるのでAllLocations
コンポーネントのrender
が走ります。この時、LocationSource
のPromise
がまだresolve
なりしてないので、LocationStore.isLoading()
はtrue
を返します。ゆえに、JSXはajax-loader.gif
を生成して、読み込み中の画面が生成されます。ちなみにこのLocationStore.isLoading()
についてもexportAsync(LocationSource)
したときに自動的に公開される関数なので覚えておく必要ありです。なにかしらSource
がペンディング中のリクエストがあるかどうか判定してくれる便利関数です。
var AllLocations = React.createClass({
// 省略
render() {
// 省略
// LocationSourceのPromiseが解決していないので、ここはtrueになる
if (LocationStore.isLoading()) {
return (
<div>
<img src="ajax-loader.gif" />
</div>
)
}
// 省略
}
});
var Locations = React.createClass({
componentDidMount() {
LocationStore.fetchLocations();
},
render() {
return (
<div>
<h1>Locations</h1>
<AltContainer store={LocationStore}>
// AltContainerのおかげでLocationStoreとAllLocationsコンポーネントが
// いい感じにつながってくれる
<AllLocations />
</AltContainer>
<h1>Favorites</h1>
<AltContainer store={FavoritesStore}>
<Favorites />
</AltContainer>
</div>
);
}
});
StoreとComponentについて図示すると以下のようになります。
そして、画面は読み込み中状態が表示されます。
ここまでがLocation取得時の初回サイクルで起きる出来事です。次回はPromise
が解決したときに何が起きているかについてまとめます。
ここまで読んで下さりありがとうございます。
見落としている点、説明が誤っている点があればご指摘お願いしますm(__)m
Author And Source
この問題について(FluxライブラリAltのデータフローについて), 我々は、より多くの情報をここで見つけました https://qiita.com/kenfdev/items/3c923bea9ab40b7d2906著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .