反応ビューのためのイベントストリーム

私はベーコンについて聞いた覚えがある.ある日、彼らのチェックアウトGetting Started page . その中で、彼らはベーコンイベントストリーミングライブラリを使用してカウンタを示しています.これはデモコードです.

var up = Bacon.fromEvent($('#up'), 'click');
var down = Bacon.fromEvent($('#down'), 'click');

var counter =
  // map up to 1, down to -1
  up.map(1).merge(down.map(-1))
  // accumulate sum
    .scan(0, (x,y) => x + y);

// assign observable value to jQuery property text
counter.onValue(text => $('#counter').text(text));

よく、これは私に非常に新しい何かでした.プログラミングの私の初期の時点では、私は自分の状態が変更されるたびに、私は手動でビューを更新します.このような

let count = 0;
updateView(count);

function updateView(count) {
    $('#counter').text = count;
}

$('#up-button').on('click', () => {
    count++;
    updateView(count);
});
$('#down-button').on('click', () => {
    count--;
    updateView(count);
});

それから、反応のようなフレームワークが私のためにビューを更新すると聞いたとき、私は「素晴らしい!私のコードは次のようになりました.

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>{count}</p>
            <button onClick={e => setCount(count => count + 1)}>Up</button>
            <button onClick={e => setCount(count => count - 1)}>Down</button>
        </div>
    );
};

oooohそれは宣言です.これ以上壊れやすい命令論理、右?つの以下のことを考える!現在、私は以下のコードを持っています.そして今、私は誤って私のビューを更新することを忘れてしまうかもしれません!私はちょうど州に手紙を書く必要があります、そして、州は私のために見解に手紙を書きます!

イベント、状態、ビュー

状態への書き込みは、ユーザーがボタンをクリックしてトリガされます.ボタンをクリックするユーザーがイベントです.UIコードでは、多くのイベントを取得します.ユーザーから、ネットワークから、いくつかのバックグラウンドタスクから.これらの出来事で、我々は、我々が国家にどのように、そして、どのように書くか決めます.次に、状態はビューを更新することによって変更されたものを示しています.

これはすばらしい.今、我々は国家管理に集中することができます.多くのアプリケーションでは、状態管理が十分簡単です.それが複雑になる場合は、イベントのようなツールを調達を試してみることができますRedux または状態機械ツールのようなXState .

イベント、変換、蓄積、ビュー

しかし、それは私には、国家管理は必須ではないことが発生しました.国家管理はそのようなスマートなパンツのように見えた、私はあなたが直接あなたのイベントに直接あなたのビューを配線できるかどうか尋ねられませんでした.
イベントを取得し、ビューに書き込みます.
もちろん、これだけでは非常に制限されます.イベントを変えることができるはずです.古い出来事を思い出す.つの結果を得るために2つまたは3つの異なるイベントを処理します.イベントをマージして蓄積する.問題でないイベントを無視してください.我々がすべてをすることができるならば、我々は実際に州管理をすることなく、我々が国家管理で持っているすべての力を得ます.

両面、同じコイン

国家管理が基本的に同じものであることを悟ったとき、私の心は吹き飛ばされました.あなたが国家に手紙を書くとき、あなたは1つの試みですべての事象関連処理をしています.ときに#up-button and #down-button をクリックすると、2つのイベントが発生します.彼らが状態に書くとき(すなわち).count++ and count-- ), 以下のようになります.

ストリームのマージ

マージがどのようにそれらの前に来たイベントに影響するかを定義する

それで、状態はあなたがすべてのイベント処理結果をダンプするバケツのようです.イベント処理世界では、発生したすべてのイベントを蓄積する能力は、格納状態に相当します.それが国家であるので、それが起こったすべての後の何かの状態.
そして、それは私がベーコンを理解した方法です.というのは、

var up = Bacon.fromEvent($('#up'), 'click');
var down = Bacon.fromEvent($('#down'), 'click');

var counter =
  // map up to 1, down to -1
  up.map(1).merge(down.map(-1))
  // accumulate sum
    .scan(0, (x,y) => x + y);

// assign observable value to jQuery property text
counter.onValue(text => $('#counter').text(text));

このようにしてcount イベントストリーミング世界の状態.状態管理とイベントストリーム処理は同じコインの2つの側面です.あなたの要件に応じていずれかを使用することができます.これらの2つのパラダイムは、オブジェクト指向プログラミングのアプローチと機能的プログラミングの同じ問題へのアプローチです.
非常に人気のイベントストリーム処理ライブラリですRxJS . 彼らのサイトには、かなり含まれていますgood guide プログラミングのこのスタイルに.またrxmarbles , これはRXイベントストリームの対話的なダイアグラムを持っています.あなたがこれに新しくて、より深く潜りたいならば、これらが良い出発点であると思います.
楽しい晩を.
このポストが好きならviewing it on my site ! あなたは私が作った他の記事を参照してください、あなたは私も私の学習をドキュメントノートを見つけるよ!