JavaScriptの関数型プログラミング - イベント

Question

私は関数型プログラミングの利点についてかなりの量を読んできましたが、関数型プログラミングと考えられるものに従ういくつかのコードを書こうとしています。不変性、純粋な関数、ローカルステートなど

私が持っている特に問題は以下のとおりです。私はそれらの規則を破ることなく、私が望むことをするための何らかの方法があるかどうか分かりません。私はそれを見つけるためにここにいると思います。

let mouseDown = false; 
 

 
document.addEventListener('mousedown',() => mouseDown = true); 
 
document.addEventListener('mouseup',() => mouseDown = false); 
 
document.addEventListener('mousemove', e => { 
 
    if (mouseDown) console.log({ x: e.movementX, y: e.movementY }); 
 
});

OOPでの作業10年以上過ごした後、私はそれは非常に難しいFPの手を得るために探しています。しかし、それはポイントの横にある。

だから、私の質問は以下のとおりです。

1. 関数型プログラミングを使用して、この特定の問題を解決する良い方法はありますか？
2. 関数型プログラミングの使用について心配する必要がありますどこでも？

Answer 1

Rxjsは、通常は、イベントリスナーを登録するコードについてはこちらを

http://reactivex.io/rxjs/manual/overview.html

に収まるだろう。

var button = document.querySelector('button'); 
button.addEventListener('click',() => console.log('Clicked!')); 

RxJSを使用すると、代わりにobservableを作成します。

var button = document.querySelector('button'); 
Rx.Observable.fromEvent(button, 'click') 
    .subscribe(() => console.log('Clicked!')); 

RxJSは、純粋な関数を使用して値を生成することができます。つまり、コードのエラーが発生しにくくなります。あなたが状態を分離RxJSを使用して

純度

var count = 0; 
var button = document.querySelector('button'); 
button.addEventListener('click',() => console.log(`Clicked ${++count} times`)); 

。

var button = document.querySelector('button'); 
Rx.Observable.fromEvent(button, 'click') 
    .scan(count => count + 1, 0) 
    .subscribe(count => console.log(`Clicked ${count} times`));