如何构建rxjs代码

Question

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

E.g.假设你有一个可观察的状态。你需要将它传递给一个小部件。该小部件具有需要部分状态的子小部件。你是否订阅？

sub = state.subscribe(widget) 

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

state.doAction(widget) 

那么你把流传递给小部件？如果是这样，你回来了什么？

what = widget(state) 

窗口小部件是否订阅状态并返回一次性消息？它返回从状态派生的流吗？如果是这样，它里面有什么？你是否试图通过广泛使用selectMany（identity）来从所有widgets/subwidgets/sub-sub-widgets中收集所有流，以获得您订阅的最终应用程序流，以便将所有内容都踢掉？

如果小部件根据需要根据状态创建子小部件，小部件如何管理其子小部件？我一直试图用groupBy（）来解决问题，每个subwidget都有一个组，但是从嵌套的observable管理所有订阅或流是一个令人难以置信的噩梦。

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

Answer 1

将观察对象作为参数传递给构件的构造函数，并让构件在将其传递给子构件构造函数之前使用额外的单元进行订阅或转换。该小部件将管理自己的订阅。

如果一个小部件产生数据（例如，用户输入），则将其公开为小部件上的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创建双向可观察流，有时可以避免需要在您的小部件上添加输出属性，但这是一个完整的另一主题:)