サイクルjsでソースとシンクを動的に更新しますか？

Question

私は3つの要素で、Reduxのサイクルを使用して非常にシンプルなアプリを書いている：

1. テキストフィールド入力されたURLへ
2. 「接続」ボタンを押してのWebSocketエンドポイントに接続する
3. アン出力パネルには、受信メッセージ、私はこの答えhttps://stackoverflow.com/a/42926532/842860

   のwiに基づいて非常に簡単なのWebSocketドライバを書かれている

を表示しますアップ再コードは次のようである：

const cycleMiddleware = createCycleMiddleware(); 
const {makeActionDriver} = cycleMiddleware; 

function main(sources) { 
    return { 
     ACTION: sources.WEBSOCKET // The websocket driver emits commands which are consumed by reducers 
    } 
} 

const store = createStore(
    reducer, // Update redux state 
    applyMiddleware(cycleMiddleware) 
); 

run(main, { 
    WEBSOCKET: WSDriver("ws://localhost:3000/something"), // The initial connection string 
    ACTION: makeActionDriver() 
}); 

質問は接続ボタンをクリックしたときに、別のエンドポイントへのWebSocketの再接続を作成する方法ですか？イベントをキャプチャして再接続するためにwebsocketドライバを変更する必要がありますか、またはサイクル/ソースがソース/シンクを動的に更新する方法を提供していますか？

Answer 1

実際にWSDriverを入力してsink$を入力して更新することが適切な方法だと思います。このsink$には、接続するURLが含まれている可能性があります。

あなたのドライバーはあなたが newConnection$が来ることを考えると、この

run(main, { 
    WEBSOCKET: WSDriver(), // < no initial connection 
    ACTION: makeActionDriver() 
}); 

そして、あなたのmain

function main(sources) { 
    return { 
     ACTION: sources.WEBSOCKET, 
     WEBSOCKET: newConnection$.startWith("ws://localhost:3000/something") 
    } 
} 

内を変更する必要がありますapp側では、この

function WSDriver(endpoint$) { 
    var activeConnection; 
    return endpoint$ 
    .map(endpointUrl => xs.create({ 
     start: listener => { 
     activeConnection = new WebSocket('ws://localhost:4000'); 
     /* no change here */ 
     }, 
     stop:() => { 
     activeConnection.close(); 
     } 
    })) 
    .flatten() // it's a stream of stream, so we need to flatten it 
} 

ようになり

バットのクリックイベントからに。

希望すると助かります