ラクティスをfacebook がいいとこ取りした( 主観) これまで提供していたDispatcher だけでなく Store の各実装とContainer という概念が追加された flux に対する欲望を全て満たすものではない( ミニマムな実 装) https://facebook.github.io/flux/docs/fluxutils.html Flux frameworks out there if these utilities do not fulfill your needs.
n t e r S t o r e e x t e n d s R e d u c e S t o r e { g e t I n i t i a l S t a t e ( ) { r e t u r n 0 ; } / / ① r e d u c e ( s t a t e , a c t i o n ) { s w i t c h ( a c t i o n . t y p e ) { / / ② c a s e C o u n t e r A c t i o n . I N C R E M E N T r e t u r n s t a t e + 1 ; / / ③ d e f a u l t : r e t u r n s t a t e ; } } } ① 初期値の設定 ② Action によって処理を分岐 ③ 変更後の値を返却することで更新を伝える
o S t o r e e x t e n d s M a p S t o r e { r e d u c e ( s t a t e , a c t i o n ) { / / ① s w i t c h ( a c t i o n . t y p e ) { c a s e T o d o A c t i o n . A D D : / / ② r e t u r n s t a t e . s e t ( a c t i o n . i d , { i d : a c t i o n . i d , t e x t : a c t i o n . t e x t / / ③ } ) ; d e f a u l t : r e t u r n s t a t e ; } } } ① Immutable.Map() をState として扱う( デフォルトでImmutable.Map() になる) ② Action によって処理を分岐(ResuceStore と同様) ③ 再生成したImmutable.Map を返却する
t e r C o n t a i n e r e x t e n d s C o m p o n e n t { s t a t i c g e t S t o r e s ( ) { r e t u r n [ C o u n t e r S t o r e ] ; / / ① } s t a t i c c a l c u l a t e S t a t e ( p r e v S t a t e ) { r e t u r n { c o u n t : C o u n t e r S t o r e . g e t S t a t e ( ) } ; / / ② } r e n d e r ( ) { / / ③ r e t u r n < C o u n t e r U I c o u n t = { t h i s . s t a t e . c o u n t } / > ; } } ① 監視する対象のStore を指定する ② store でchange イベントが発行されると、caculucateState メソッドが呼ばれる 返り値が新しいstate となる( 引数では前回のstate が受け取れる) ③ 更新されたstate をprops としてComponent に渡す( ここではUI は決して持たない!!)