javascript - firebaseapp - rxjs observable example

Como estructurar el código rxjs.

Question

¿Cómo se estructura una aplicación de rxjs? Hay alrededor de cien ejemplos de introducción de juguetes, pero no un solo ejemplo de una aplicación completa, con widgets, subwidgets, etc., que muestren el flujo de datos en toda la aplicación.

Por ejemplo, supongamos que tienes un observable con algún estado. Necesitas pasarlo a un widget. Ese widget tiene subwidgets que necesitan porciones de ese estado. ¿Te suscribes?

sub = state.subscribe(widget)

Ahora ''widget'' está fuera de la mónada. Los subwidgets no pueden usar métodos observables en el estado. Tienes el mismo problema si ejecutas el widget como efecto secundario.

state.doAction(widget)

¿Así que pasas la corriente al widget? Si es así, ¿qué vuelves?

what = widget(state)

¿El widget se suscribe al estado y devuelve un desechable? ¿Devuelve un flujo derivado del estado? Si es así, ¿qué hay en ello? ¿Tratas de recopilar todas las transmisiones juntas de todos los widgets / subwidgets / sub-sub-sub-widgets con un uso extensivo de selectMany (identidad) para obtener un flujo de aplicación final al que te suscribas para comenzar todo?

Y si el widget crea subwidgets a pedido, según el estado, ¿cómo administra el widget sus subwidgets? Sigo intentando una solución con groupBy (), tengo un grupo por subwidget, pero administrar todas las suscripciones o transmisiones desde el observable anidado es una pesadilla increíble.

Incluso un ejemplo de una aplicación completa sería útil.

Answer 1

Pase los observables al constructor del widget como argumentos y deje que el widget se suscriba o transforme con mónadas adicionales antes de pasarlo a sus constructores de sub-widgets. El widget gestionará sus propias suscripciones.

Si un widget produce datos (por ejemplo, entrada del usuario), expóngalo como propiedades observables en el widget.

Tenga en cuenta que los widgets en sí mismos no son parte de la corriente observable. Simplemente consumen flujos de entrada y producen flujos de salida.

// 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?
}

Y así. Si está utilizando Knockout, puede aprovechar ko.observable para crear transmisiones observables de dos vías y, a veces, evitar la necesidad de agregar propiedades de salida en sus widgets, pero eso no es un tema completo :)