Разработка javascript приложений на базе Rx.js и React.js (RxReact)
React.js позволяет очень эффективно и быстро работать с DOM-ом, активно развивается и с каждым днем набирает все больше популярности. Недавно открыл для себя концепцию реактивного программирования, в частности, не менее популярную библиотеку Rx.js. Данная библиотека выводит на новый уровень работу с событиями и асинхронным кодом, которого в UI логике javascript приложений предостаточно. Пришла идея объединить мощь данных библиотек в одно целое и посмотреть что из этого выйдет. В этой статье вы узнаете о том как удалось подружить Rx.js и React.js.RxReact — новая библиотека?
Может кто-то останется разочарован —, но нет. Одним из позитивных моментов данного подхода является то, что вам не нужно устанавливать дополнительно никаких новых библиотек. Поэтому сильно не заморачивался и назвал данный подход RxReact.Для нетерпеливых — репо с тестовыми примерами.Зачем?
Изначально, когда только знакомился с React, совершенно не стеснялся фаршировать компоненты бизнес логикой, ajax запросами и т.д. Но как показала практика, мешать это все внутрь React компонентов, подписываясь на различные хуки, сохраняя промежуточное мутабельное состояние — крайне плохая идея. Становится сложно вносить изменения и разбираться в таких компонентах — монстрах. React в моем представлении идеально подходит только для отрисовки конкретного состояния (слепка) приложения в определенный момент времени, но сама логика того, как и когда будет меняется это состояние, совсем не его дело и должна находиться в другом слое абстракции. Чем меньше об этом знает слой представления, тем спокойнее мы спим. Хотелось максимально приблизить React компоненты к pure функциям без мутабельного, хранимого состояния, лишних сайд эффектов и т.д. В то же время, хотелось усовершенствовать работу с событиями, желательно вынести в отдельный слой логики декларативное описание того, как должно взаимодействовать приложение с пользователем, реагировать на различные события и изменять свое состояние. Кроме того, хотелось иметь возможность компоновать цепочки последовательностей действий из синхронных и асинхронных операций.Нет, это не совсем Flux
Любознательный читатель, который дочитал до этого пункта, уже несколько раз мог подумать: «Так есть же Flux — бери и пользуйся». Совсем недавно взглянул на него и, к своему удивлению, нашел очень много похожего с концепцией, про которую хочу вам рассказать. На данный момент уже видел несколько реализаций Flux. RxReact — не исключение, но в свою очередь имеет несколько иной подход. Вышло так, что сам непроизвольно пришел к почти тем же архитектурным составляющим как: dispatcher, storage, actions. Они во многом похожи на те, что описываются в архитектуре Flux-а.Основные компоненты
Надеюсь, что удалось чем-то вас заинтриговать и вы дочитали до этого места, ведь тут начинается самое вкусное. Для более наглядного примера будет рассмотрено тестовое приложение: 
Demo сайт — demo1.Исходник — тут.Само приложение не делает ничего полезного, просто счетчик кликов по кнопке.
View Слой представления является React компонентом, главная цель которого — отрисовать текущее состояние и сигнализировать о событиях в UI.Итак, что же должен уметь view?
рисовать UI сигнализировать о событиях в UI Ниже код view из примера (view.coffee): React = require 'react' {div, button} = React.DOM
HelloView = React.createClass getDefaultProps: → clicksCount: 0
incrementClickCount: → @props.eventStream.onNext action: «increment_click_count»
render: → div null, div null, «You clicked #{@props.clicksCount} times» button onClick: @incrementClickCount «Click»
module.exports = HelloView javascript версия файла view.coffee var React = require ('react'); var div = React.DOM.div; var button = React.DOM.button;
HelloView = React.createClass ({ getDefaultProps: function () { return { clicksCount: 0 }; },
incrementClickCount: function () { return this.props.eventStream.onNext ({ action: «increment_click_count» }); },
render: function () { return div (null, div (null, «You clicked » + this.props.clicksCount + » times»), button ({onClick: this.incrementClickCount}, «Click»)); }});
module.exports = HelloView; Как видим, все данные о кликах приходят нам «сверху» через объект props. При клике на кнопку мы посылаем action через канал eventStream. View сигнализирует нам о кликах на кнопку с помощью eventStream.onNext, где eventStream — инстанс Rx.Subject. Rx.Subject — канал, в который можно как посылать сообщения, так и создавать из него подписчиков. Дальше будет более подробно рассмотрено как работать c Rx.Subject.
После того, как мы четко определили функции view и канала сообщений, их можно выделить на структурной схеме: 
Как видно, view является React компонентом, получает на вход текущее состояние приложения (app state), отправляет сообщения о событиях через event stream (actions). В данной схеме Event Stream является каналом связи между view и остальной частью приложения (изображена тучкой). Постепенно мы будем определять конкретные функции компонентов и выносить из общего js application блока.
Storage (Model) Следующий компонент — Storage. Изначально я называл это Model, но всегда думал о том что model не совсем подходящее название. Так как моделью в моем представлении является некая конкретная сущность (User, Product), а тут мы имеем набор различных данных (много моделей, флаги), с которым работает наше приложение. В реализациях Flux-а, которые приходилось видеть, storage был реализован в виде singleton модуля. В моей реализации такой необходимости нет. Это дает теоретическую возможность безболезненного существования нескольких инстансов приложения на одной странице.Что умеет storage?
хранить данные менять данные возвращать данные В моем примере storage реализован через coffee класс с некими свойствами (storage.coffee):
class HelloStorage constructor: → @clicksCount = 0
getClicksCount: → @clicksCount
incrementClicksCount: → @clicksCount += 1
module.exports = HelloStorage javascript версия storage.coffee var HelloStorage;
HelloStorage = (function () { function HelloStorage () { this.clicksCount = 0; }
HelloStorage.prototype.getClicksCount = function () { return this.clicksCount; };
HelloStorage.prototype.incrementClicksCount = function () { return this.clicksCount += 1; };
return HelloStorage;
})();
module.exports = HelloStorage; Сам по себе storage понятия не имеет о UI, о том что есть какой-то Rx и React. Хранилище делает то, что должно делать по определению — хранить данные (состояние приложения).
На структурной схеме можем выделить storage: 
Dispatcher Итак, у нас есть view — отрисовывает приложение в определенный момент времени, storage — в котором хранится текущее состояние. Не хватает связывающего компонента, который будет слушать события из view, при необходимости менять состояние и давать команду обновить view. Таким компонентом как раз является dispatcher.Что должен уметь dispatcher?
реагировать на события из view обновлять данные в storage инициировать обновления view С точки зрения Rx.js, мы можем рассматривать view как бесконечный источник неких событий, на который мы можем создавать подписчиков. В примере из demo у нас всего один подписчик в dispatcher-е — подписчик на клики по кнопке увеличения значений.
Вот как будет выглядеть подписка на клики по кнопке в коде dispatcher-а:
incrementClickStream = eventStream.filter (({action}) → action is «increment_click_count»)
javascript версия
var incrementClickStream = eventStream.filter (function (arg) {
return arg.action === «increment_click_count»;
});
Для более полного понимания код выше можно наглядно изобразить так: 
На изображении видим 2 канала сообщений. Первый — eventStream (базовый канал) и второй, полученный из базового — incrementClickStream. Кружочками изображена последовательность событий в канале, в каждом событии передается аргумент action, по которому мы можем фильтровать (диспатчить).
Напомню, что сообщения в канал посылает view с помощью вызова:
eventStream.onNext ({action: «increment_click_count»})
Полученный incrementClickStream является инстансом Observable и мы можем работать с ним так же, как и с eventStream, что мы в принципе и сделаем. А дальше мы должны указать, что на каждый клик по кнопке мы хотим увеличивать значение в storage (изменять состояние приложения).
incrementClickStream = eventStream.filter (({action}) → action is «increment_click_count»)
.do (→ store.incrementClicksCount ())
javascript версия
var incrementClickStream = eventStream.filter (function (arg) {
return arg.action === «increment_click_count»;
}).do (function () {
return store.incrementClicksCount ();
});
Схематически выглядит так: 
На этот раз мы получаем источник значений, который должен обновлять view, так как меняется состояние приложения (увеличивается кол-во кликов). Для того, чтобы это произошло, необходимо подписаться на источник incrementClickStream и вызвать setProps на react компоненте, который отрисовывает view.
incrementClickStream.subscribe (→ view.setProps {clicksCount: store.getClicksCount ()}) javascript версия incrementClickStream.subscribe (function () { return view.setProps ({ clicksCount: store.getClicksCount () }); }); Таким образом, мы замыкаем цепочку и наш view будет обновлен каждый раз, как мы кликнули по кнопке. Таких источников, обновляющих view, может быть много, поэтому целесообразно объединять их в один источник событий с помощью Rx.Observable.merge.
Rx.Observable.merge ( incrementClickCountStream decrementClickCountStream anotherStream # e.t.c) .subscribe ( → view.setProps getViewState (store) → # error handling ) javascript версия Rx.Observable.merge ( incrementClickCountStream, decrementClickCountStream, anotherStream) .subscribe ( function () { return view.setProps (getViewState (store)); }, function () {}); // error handling В данном коде появляется функция getViewState. Эта функция всего лишь вынимает нужные для view данные из storage и возвращает их. В примере из demo она выглядит так:
getViewState = (store) → clicksCount: store.getClicksCount () javascript версия var getViewState = function (store) { return { clicksCount: store.getClicksCount () }; }; Почему не передать storage напрямую во view? Затем, чтобы не было соблазна что-либо записать напрямую из view, вызвать не нужные методы и т.д. View получает данные подготовленные именно для отображения в визуальной части приложения, ни больше ни меньше.
Схематически мерж источников выглядит так:
Выходит, в придачу к тому, что нам не нужно вызывать всякие «onUpdate» ивенты из модели для обновления view, мы еще также имеем возможность обработки ошибок в одном месте. Вторым аргументом в subscribe передается функция для обработки ошибок. Работает по такому же принципу как и в Promise. Rx.Observable имеет много общего с промисами, но является более совершенным механизмом, так как рассматривает не единственное обещаемое значение, а бесконечную последовательность возвращаемых значений во времени.
Полный код dispatcher выглядит подобным образом:
Rx = require 'rx'
getViewState = (store) → clicksCount: store.getClicksCount ()
dispatchActions = (view, eventStream, storage) → incrementClickStream = eventStream # получаем источник кликов .filter (({action}) → action is «increment_click_count») .do (→ storage.incrementClicksCount ())
Rx.Observable.merge ( incrementClickStream # и еще много источников обновляющих view…
).subscribe ( → view.setProps getViewState (storage) (err) → console.error? err)
module.exports = dispatchActions javascript версия var Rx = require ('rx');
var getViewState = function (store) { return { clicksCount: store.getClicksCount () }; };
var dispatchActions = function (view, eventStream, storage) { var incrementClickStream = eventStream.filter (function (arg) { return arg.action === «increment_click_count»;}) .do (function () { return storage.incrementClicksCount (); }); return Rx.Observable.merge (incrementClickCountStream) .subscribe (function () { return view.setProps (getViewState (storage)); }, function (err) { return typeof console.error === «function» ? console.error (err) : void 0; }); };
module.exports = dispatchActions; Полный код файла — dispatcher.coffee
Вся логика диспатчинга помещается в функцию dispatchActions, которая принимает на вход:
view — инстанс React компонента storage — инстанс storage eventStream — канал сообщений Поместив dispatcher на схему, имеем полную структурную схему архитектуры приложения:
Инициализация компонентов Далее нам остается каким-то образом инициализировать: view, storage и dispatcher. Сделаем это в отдельном файле — app.coffe: Rx = require 'rx' React = require 'react' HelloView = React.createFactory (require './view') HelloStorage = require './storage' dispatchActions = require './dispatcher'
initApp = (mountNode) → eventStream = new Rx.Subject () # создаем канал сообщений store = new HelloStorage () # cоздаем хранилище # получаем инстанс отрисованного view view = React.render HelloView ({eventStream}), mountNode # передаем компоненты в dispatcher dispatchActions (view, eventStream, store)
module.exports = initApp javascript версия var Rx = require ('rx');
var React = require ('react');
var HelloView = React.createFactory (require ('./view'));
var HelloStorage = require ('./storage');
var dispatchActions = require ('./dispatcher');
initApp = function (mountNode) { var eventStream = new Rx.Subject (); var store = new HelloStorage (); var view = React.render (HelloView ({eventStream: eventStream}), mountNode); dispatchActions (view, eventStream, store); };
module.exports = initApp; Функция initApp принимает на вход mountNode. Mount Node, в данном контексте, является DOM элементом, в который будет отрисован корневой React компонент.
Генератор базовой структуры модуля RxRact (Yeoman)
Для быстрого создания вышеперечисленных компонентов в новом приложении можно использовать Yeoman.Генератор — generator-rxreactПример посложнее
Пример с одним источником событий хорошо показывает принцип взаимодействия компонентов, но совсем не демонстрирует преимущество использования Rx в связке с React. Для примера давайте представим, что по требованию мы должны усовершенствовать 1й пример из demo таким образом: возможность уменьшать значение
сохранять его на сервер при изменении, но не чаще чем раз в секунду и только если оно поменялось
показывать сообщение об успешном сохранении
прятать сообщение об успешном сохранении через 2 секунды
В итоге, должны получить такой результат: 
Demo сайт — demo2.Исходный код для demo2 — тут.
Не буду описывать изменения во всех компонентах, покажу самое интересное — изменения в dispatcher-е и попытаюсь максимально подробно прокомментировать происходящее в файле:
Rx = require 'rx' {saveToDb} = require './transport' # импортируем асинхронную функцию (эмуляция синхронизации с базой данных)
getViewState = (store) → clicksCount: store.getClicksCount () showSavedMessage: store.getShowSavedMessage () # в view state добавился флаг отображаить или нет # сообщение об успешном сохранении
dispatchActions = (view, eventStream, store) → # источник »+1» кликов incrementClickSource = eventStream .filter (({action}) → action is «increment_click_count») .do (→ store.incrementClicksCount ()) .share () # источник »-1» кликов decrementClickSource = eventStream .filter (({action}) → action is «decrement_click_count») .do (→ store.decrementClickscount ()) .share () # Соединяем два источника кликов в один countClicks = Rx.Observable .merge (incrementClickSource, decrementClickSource) # Обработка кликов (-1, +1) showSavedMessageSource = countClicks .throttle (1000) # ставим задержку 1 секунду .distinct (→ store.getClicksCount ()) # реагируем только если изменилось число кликов .flatMap (→ saveToDb store.getClicksCount ()) # вызываем асинхронную функцию сохранения .do (→ store.enableSavedMessage ()) # показываем сообщение об успешном сохранении # создаем подписчика, который спрячет сообщение об успешном сохранении после 2 секунд hideSavedMessage = showSavedMessageSource.delay (2000) .do (→ store.disableSavedMessage ())
# Соединяем все источники в один, который будет обновлять view Rx.Observable.merge ( countClicks showSavedMessageSource hideSavedMessage ).subscribe ( → view.setProps getViewState (store) (err) → console.error? err)
module.exports = dispatchActions Я надеюсь, что вас так же, как и меня, впечатляет возможность декларативно описывать операции, выполняемые в нашем приложении, при этом создавать компонуемые цепочки вычислений, состоящие из синхронных и асинхронных действий.На этом буду заканчивать рассказ. Надеюсь, удалось донести основную суть использования концепции реактивного программирования и React для построения пользовательских приложений.Несклько ссылок из статьи P.S Все демки из статьи используют server side prerendering для React.js, для этого создал специальный gulp плагин — gulp-react-render.
