React x flux でツールを作ったのでfluxについてまとめる

with コメントはまだありません

flux

そこら中で貼られてるfluxの概念図を貼っておきます。

f:id:deeptoneworks:20161012135719p:plain

簡単に言うと、
・Viewは親Component
・Actionは処理の内容を記したオブジェクト
・DispatcherはStoreへActionの通知を行う。具体的には登録されたCallbackを順次実行していく。
・Storeは状態の保持と状態の更新の通知を行う

View -> Action -> Dispatcher -> Storeとデータが伝搬されていく。
ViewはStoreを保持しており、Storeの状態が更新されたらViewに通知をする。

では、ひとつひとつの登場人物を詳しく見ていきます。

Dispatcher

DispatcherはActionを受け取って、登録されているCallbackを実行するものです。
Dispatcherに必要なメソッドはfluxライブラリから全て提供されていますので、私たちにに必要なことはDispatcherを使うことだけです。
使うというのは、DispatcherにCallbackを登録、Callbackを実行、Callbackが呼び出される順番を操作する、などといったことを指します。

Dispatcherはしばしば拡張されることがあります。
拡張にどのようなパターンがあるのかはわかりませんが、1つのパターンとして、どのVIewからdispatchされたか、という情報を付与するために用いられます。

ViewからActionを実行するときは、dispatchメソッドの代わりに、先に拡張したメソッドを用います。
拡張していない場合は普通にdispatchメソッドを使います。

こうすることで、どのViewからDispatchされたか、という情報を付与した上でCallbackを実行できます。
他にも拡張のパターンがあれば教えて下さい><

Action

Actionは処理の内容を記したオブジェクトをDispatcherにdispatch(発行)します。
dispatchされたらDispatcherは登録されたCallbackを実行する、という感じですね。

actionを受け取るCallbackはtypeを見てデータをどう扱うかを決定します。

Store

ストアは状態を保持します。
更に、dispatcherにCallbackを登録する役割もあります。
同じstoreが複数同じCallbackを登録してはいけないので、Storeはシングルトンになります。

コンストラクタでdispatcherにCallbackを登録しています。このメソッドにactionが届くわけですね。

さて、登録したCallback、handleActionにactionが届きます。
この時storeはactionの型を見て、どのようにデータを扱うかを判断します。
上記の例では単純にdataにactionのvalueを入れているだけですね。
そして、データに変更があったという事をEventEmitterにより通知しています。
この通知をViewが受け取って、状態が更新されていきます。

例えば上記の例ですと、changeイベントが通知されればaddChangeListenerに登録されたcallbackが実行されるといった流れです。

View

Viewではまず、storeの初期値をコンストラクタで受け取ります。
一般にstoreではgetAllメソッドという名前で提供することが多いようです。

そして、storeからデータの変更通知を受け取るcallbackを登録します。

これで、storeの値が変更されると、viewのstatusも変更されるようになりました。
あとはこのstatusの値を子Componentのpropsとして流し込んでやれば単一方向のデータフローが実現できますね。

セルの素性を抽出する

with コメントはまだありません

タイトルのセルか、データのセルか、列見出しか行見出しか・・などを推定するための素性を設定するで。

とりあえず、以下にしたで。
x座標,y座標の算出に使うセルの原点は左上としてるで。

  • width
  • height
  • x
  • y
  • x座標(%)
  • y座標(%)
  • 面積
  • 面積(%)
  • セルの4隅の座標
  • セルの文字の種類
  • セルの文字そのもの
[width,height] セルの横幅と縦幅。何も整形しない。

[x,y] 横から何個目、縦から何個目といった値。
問題点があって、認識されないような小さいセルは無視するから実際のものとxがズレるんやなあ。yはズレへんけど。
あと、エクセル画像が2枚以上の時は、1枚目の最後のyを引き継ぐで。

[x座標,y座標(%)] セルの左上の座標をwidth,heightで割った値。
これはちょっとした整形処理を行ってるんや。
例えば、3枚のエクセル画像があって、それぞれ100%,30%,100%埋まってるとする。つまり、2枚目は下2/3が空白の画像って事。
このとき、100%,100%,30%と解釈して、y座標は一番下のセルまでが100%として算出されるで! だから、一番下のセルは画像に空白があっても絶対99%とかいう値になるって事や!
ええ感じやな!

[面積] これはセルの面積そのままな。

[面積(%)] これはセルの面積を、すべての画像の面積で割った値や。めっちゃ小さい値になるわ。

[セルの4隅の座標] これもy座標算出のときと同じように、白紙のスペースは埋める処理をやっとるで。
それ以外の整形はしてないで。

[セルの文字の種類] 空白か文字か数字か、やな。

どの素性が分類に活きてくるかはわからんから、とりあえず思いつくものは全部とっといたで。
もっと他にも良さげな素性ないかなあ・・。なんかある気がするんよな。