Question

如何构建rxjs应用程序？大约有一百个玩具介绍示例，但不是一个完整应用程序的单个示例，包含小部件，子小部件等，显示整个应用程序中的数据流。

E.g。假设你有一个状态的观察者。您需要将其传递给窗口小部件。该小部件具有需要该状态部分的子小部件。你做订阅了吗？

sub = state.subscribe(widget)

现在'widget'不在monad中。子窗口小部件不能在状态上使用可观察的方法。如果您将窗口小部件作为副作用运行，则会遇到同样的问题。

state.doAction(widget)

那么你将流传递给widget吗？如果是这样，你会得到什么回报？

what = widget(state)

小部件是否订阅状态并返回一次性用户？它是否返回从状态派生的流？如果是这样，它里面有什么？您是否尝试从所有窗口小部件/子窗口小部件/子子窗口小部件一起收集所有流，并大量使用selectMany（标识）来获取您订阅的最终应用程序流，以便完成所有操作？

如果窗口小部件根据状态按需创建子窗口小部件，窗口小部件如何管理其子窗口小部件？我一直在尝试使用groupBy（）的解决方案，每个子窗口小部件都有一个组，但是从嵌套的observable管理所有订阅或流是一个难以置信的噩梦。

即使整个应用程序的一个示例也会有所帮助。

Answer 1

将可观察对象作为参数传递给窗口小部件的构造函数，并让窗口小部件在将其传递给子窗口构造函数之前使用其他monad订阅或转换它。小部件将管理自己的订阅。

如果窗口小部件生成数据（例如用户输入），请在窗口小部件上将其公开为Observable属性。

请注意，窗口小部件本身不是可观察流的一部分。它们只消耗输入流并产生输出流。

// 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创建双向可观察流，有时可以避免在窗口小部件上添加输出属性，但这是一个完整的主题：）

如何构造rxjs代码

1 个答案: