カラクリスタ

『輝かしい青春』なんて失かったヒトのブログ

言語を問わず、Redux とか Flux っぽい事をするにはどうしたら良いか

と言う事について考えていた話です。


今日はメンタルの方の運動療法的なリハビリに通うために、午前中から夕方まで出掛けっぱなしで、 その移動の間に rebuild.fm の未聴を聴いたり、あるいは、Instapaper に貯まっていた未読記事を消化したりしていたんだけど、 その時に技術的な記事やら話やらを聴いていて、何が切っ掛けだったかは覚えてないんだけど、

そういや JavaScript の Redux とか Flux とかって、WebView に限って言えば、 別に DOM の Custom Events だけで出来るんじゃね?

と以前にも思いついていた事を思い出して、電車での移動中に色々調べていました。

それで、家に帰宅してから、コードを書こうとして色々と書いては消し書いては消しを行なって、 色々と頭の中の考えを整理した結果、

Redux とか Flux って、つまる所、こう言う事じゃね?

と、言う様なコードを Golang な擬似コードで書いたんですが、それが下記になります:

package application

type State struct{
    // your code here
}

type Updater interface {
    Update(state State) State
}

type UpdaterFunc func(state State) State

func (update UpdaterFunc) Update(state State) State {
    return update(state)
}

type Renderer interface {
    Render(state State) error
}

type RendererFunc func(state State) error

func (render RendererFunc) Render(state) error {
    return render(state)
}

type Application interface {
    Update(updater Updater) error
    Apply() error
}

func New(renderer Renderer, initial State) Application {
    // your code here
}

で、これはあくまで僕の解釈なんですが、Redux とか Flux みたいなの、 基本的には、

  1. State を食って新しい State を吐くヤツ (上記の Updater)
  2. State を食って何かしらの出力を吐くヤツ (上記の Renderer)
  3. あとは State を食って何かしたをするヤツをくっ付ける糊っぽいヤツ (上記でいう Application)

の三つさえ実装してしまえば、後は味付けの違いでしかないよなーとか思いました。

で、正直言うと、僕は React とか Redux は、最初の方の流行り出しの頃にちょっと齧った程度で、 JSX とかは兎も角、Redux とかはその後はあんまり触ってない感じで、現状どうなってるかはちょっと把握し切れてないんですが、 極限まで余分を削ぎ落すと、多分上記の様なコードになるんだろうなー、と勝手に思ってたりします。

あと、一時期 Web Components ベースの OnsenUI とか触ってた時に特に感じたんですが、 Web Components ベースの UI framework は、オフィシャルが提供している以外の React っぽいどとか使おうとすると、 なんか地味に相性が良くない感じな部分が有ったので、そう言った意味では、下手にライブラリで Redux とか Flux っぽい事をせずに、 Custom Events ベースで One-way Binding すれば良いんじゃないかなーとか思いました。はい。