Функциональное программирование в 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 }); 
 
});

Проведя более 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, вместо этого вы создаете наблюдаемое.

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

Что делает RxJS мощным - это способность производить значения с использованием чистых функций. Это означает, что ваш код менее подвержен ошибкам.

Purity

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

Использование RxJS изолировать состояние.

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