Help us understand the problem. What is going on with this article?

Redux で反逆を起こしてマトリックスを作る

More than 3 years have passed since last update.

タイトルはあれですが riotとReduxの組み合わせのアプリの素振りをまとめました。
ということでこんなの作りました。

screen.gif

題材

普通のWebアプリでもいいかなぁって思ったのですがどうせならザクザク動くものがいいなぁと思って適当にサーフィンしていたら、Matrix 風のEffectを再現したスクリプトを見つけたのでそれをRedux , riot に落とし込んでみようかなぁっと考えました。1

元のスクリプト

元になるスクリプトはこちらになります

ソースを抜粋しておきます

//drawing the characters
function draw()
{
    //省略
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        ctx.fillText(text, i*font_size, drops[i]*font_size);

        if(drops[i]*font_size > c.height && Math.random() > 0.975)
        drops[i] = 0;   
        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);

フォントサイズ分のカラムを用意してカラム分の配列にY座標を記録していきます。

setInterval 毎に座標を一つづつ更新していき下まで達した段階でランダムに座標をゼロに戻します。

仕様

  • 初期値: 0 - 9 までの文字列
  • 30秒毎にランダムな絵文字を混入させていく
  • 外部からのフォントサイズの変更
  • 外部からの文字列の混入

せっかくStateをRedux管理にするので出来心から外部から動的に変数を変えられるようにしてみました。

実装

setInterval の部分

元のスクリプトではdraw関数をそのままsetIntervalに登録しているとStateの管理をReduxに預けることができないのでまずはupdate用のアクションクリエータを登録するようにしました。

setInterval(draw, 33) => setInterval(あくしょんくりえーた, 33)

Storeに保持するものと保持しないもの

正直どこまでStateに保存すべきか悩みましたが描画に関するものは全てState管理するようにしました。

State管理にしたもの

  • 各カラムの座標
  • 各カラムの文字
  • fontSize
  • canvas のwidth, height
  • context

Stateから外したもの

  • バックグラウンドのスタイル

基本動的な変更を付け加えたい(今回の実装では残念ながら固定値でいいようなケースでも)項目は全てStateの管理にすることにしました。

ここまでくると draw関数は入力された値を元に描画するだけの関数となりかなりシンプルになります。

const draw = ({ctx, textArray, fontSize, fontColor, height, width, drops}) => {
      ctx.fillStyle = "rgba(0, 0, 0, 0.05)"
      ctx.fillRect(0, 0, width, height)

      ctx.fillStyle = fontColor
      ctx.font = fontSize + "px arial"

      for (let i = 0; i < drops.length; i++) {
          ctx.fillText(drops[i].text, i * fontSize, drops[i].pos * fontSize)
      }
}
const store = this.opts.store

store.subscribe(() => {
    draw(store.getState())
})

Storeの変更を検知してそのままdraw関数に流すだけとなり描画部分とデータ部分を切り離すことができました。

Randomな振る舞いをどう扱うか

Randomな座標や生成する文字列をどこで計算すべきかということです。

案1. Reducersの中で処理する

Reducers内では前回のStateを参照できるので、そこからrandomな文字列や座標を計算して新しいStateを返すという処理が比較的簡単に書けそうです。
しかしドキュメントによればReducersは純関数であることが期待されます

http://redux.js.org/docs/basics/Reducers.html#handling-actions

Randomという冪等制を持たない関数をreducer内で行うのは違うと思いやめました。

案2 ActionCreator内で処理する

ActionCreatorで処理して変数を Reducersに引き渡すのが良さそうです。
 ただActionCreator内でMath.randomを各々呼ぶとテストがしにくいと思ったので少し違う方法をとるようにしました。

案3 RNGを設定できるMiddlewareを自作する

テストのことを考えると外部からRandom-Number Generator(RNG)を渡せるような構造にしておきたいところです。
と考えると実装そしてはこんな感じになります

export const randomTest = createAction(TEST, (value, rng = Math.random()) => ...process...)

各アクションにランダムの引数入れるのイケテないなぁっと思って特定のActionの場合だけRNGを引き渡すようなMiddlewareを自作しました。
こんな風に使います

export const moveDrops = () =>
    randomAction((rng, state) =>
        rng()   <- この返り値が丸ごとpayloadになる
    )(updateDropsAction)

randomActionのActionを作成して引数にRNG, とStateを渡すようにしました。

RandomActionの第一引数の処理が終わった後に次のアクションであるupdaeDropsActionを叩くきます

ソースはこんな感じ

const RANDOM = 'RANDOM'

const randomColumns = (rng = Math.random.bind(this)) => store => next => action => {
    if(action.type === RANDOM && typeof action.fn === 'function'){
        const r = action.fn(rng, Object.assign({}, store.getState()))
        action.nextAction && store.dispatch(action.nextAction(r))
    }
    return next(action)
}

export const randomAction = fn => nextAction => ({
    type: RANDOM,
    fn,
    nextAction
})

export default randomColumns

こうすることでrngを外部から指定するということをあまり意識せずにランダムな関数を使えるようになります。

ちなみにこれ以外でもcomponentで頑張るってのもアリです。

Middlewareの作り方はReduxのドキュメントを参考にしました。
すごくわかりやすいです
http://redux.js.org/docs/advanced/Middleware.html

デモ

https://1984weed.github.io/riot-redux-matrix/

ソース

https://github.com/1984weed/riot-redux-matrix

GitHub Pages へのデプロイ

そういえばgh-pagesに自動デプロイをしたことなかったのでここを参考にした
https://gist.github.com/domenic/ec8b0fc8ab45f39403dd
http://qiita.com/dora56/items/cafae475daec802b6b8f

断念したこと

Flow

riotの型の部分でサクッと導入できなかったので断念した。もうちょっと粘りたかったがタイムオーバー。

redux-loop

非同期な部分がなかったので導入しなかった。けど少し興味のあるライブラリ。

まとめ

今のコードだとStoreをどこからでも参照できるので若干危険な匂いがするコードになっています。その辺をうまく閉じ込めつつコンポーネントやActionCreaterで触らなくてもいいような感じにしたいところです。

react-reduxなんかはそこらへん上手くやっててStateを扱う部分は割と限定的にしつつ実装ができた気がします。


  1. ックスの部分がかかってたからというのが本音 

knhr__
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away