Как структурировать код rxjs - программирование

Как структурировать приложение rxjs? Существует около ста примеров игрушечных интро, но не один пример полного приложения с виджетами, субвидео и т.д., Показывающий поток данных через все приложение.

например. предположим, что у вас есть наблюдаемое с некоторым состоянием. Вам нужно передать его виджету. У этого виджета есть субвиды, которым нужны части этого состояния. Вы подписались на подписку?

sub = state.subscribe(widget)

Теперь "виджет" находится вне монады. Подвижки не могут использовать наблюдаемые методы для состояния. У вас такая же проблема, если вы запускаете виджет как побочный эффект.

state.doAction(widget)

Итак, вы передаете поток в виджет? Если да, то что вы вернетесь?

what = widget(state)

Подходит ли виджет к состоянию и возвращает одноразовый? Возвращает ли он поток, полученный из состояния? Если да, то что в нем? Вы пытаетесь собрать все потоки вместе со всеми виджетами/субвидечками/суб-виджетами с широким использованием selectMany (identity), чтобы получить окончательный поток приложений, который вы подписали, чтобы отбросить все это?

И если виджет создает подвидки по запросу, в зависимости от состояния, как виджет управляет своими подвидками? Я продолжаю пробовать решение с groupBy(), имея группу в подвиджете, но управление всеми подписками или потоками обратно из вложенных наблюдаемых - невероятный кошмар.

Даже один пример целого приложения будет полезен.

Ответ 1

Передайте наблюдаемые в конструктор виджета в качестве аргументов и дайте виджет подписаться или преобразовать его с помощью дополнительных монад, прежде чем передавать его его конструкторам суб-виджета. Виджет будет управлять своими подписками.

Если виджет создает данные (например, пользовательский ввод), выставляйте его как наблюдаемые свойства в виджетах.

Обратите внимание, что сами виджеты не являются частью наблюдаемого потока. Они просто потребляют входные потоки и создают выходные потоки.

// main app
var someState = Rx.Observable....;
var someWidget = createSomeWidget(someState, ...);
var s = someWidget.userData.map(...).subscribe(...);

// SomeWidget
var SomeWidget = function ($element, state, ...) {
    this.userData = $element
        .find("button.save")
        .onAsObservable("click")
        .map(...collect form fields...);

    // we need to do stuff with state
    this.s = state.subscribe(...);

    // we also need to make a child widget that needs some of the state
    // after we have sanitized it a bit.
    var childState = state.filter(...).map(...)...;
    this.childWidget = new ChildWidget(childState, ...);

    // listen to child widgets?
}

И так далее. Если вы используете Knockout, вы можете использовать ko.observable для создания двухсторонних наблюдаемых потоков и иногда избегать необходимости добавлять свойства вывода в свои виджеты, но это целая тема:)