Update source and sink dynamically in cycle js? - redux

Question

I'm writing a very simple app using redux-cycle, with 3 elements:
A text field to input url
A "connect" button to connect to a websocket end point
An output panel to show incoming messages
I have written a very simple websocket driver based on this answer https://stackoverflow.com/a/42926532/842860
The wire up code is like this:
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()
});
The question is how to make the websocket reconnect to another end point when the connect button is clicked? Do I need to modify my websocket driver to capture the event and reconnect, or does cyclejs provide a way to dynamically update the source/sink?

Answer 1

I think the appropriate method would be to, indeed, update the WSDriver to take a sink$ as input. This sink$ could contain the url you want to connect to.
Your driver would look like this
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
}
On the app side you would need to change this
run(main, {
WEBSOCKET: WSDriver(), // < no initial connection
ACTION: makeActionDriver()
});
And in your main
function main(sources) {
return {
ACTION: sources.WEBSOCKET,
WEBSOCKET: newConnection$.startWith("ws://localhost:3000/something")
}
}
Given that the newConnection$ comes from the click events on the button.
Hope it helps