如何構建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創建雙向可觀察流，有時可以避免需要在您的小部件上添加輸出屬性，但這是一個完整的另一主題:)