在循环js中动态更新源和接收器？

Question

我正在使用 redux-cycle 编写一个非常简单的应用程序，包含 3 个元素：

要输入的文本字段url
一个 "connect" 按钮连接到 websocket 端点
显示传入消息的输出面板

我根据这个答案写了一个非常简单的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 驱动程序来捕获事件并重新连接，或者 cyclejs 是否提供了一种动态更新 source/sink 的方法？

Answer 1

我认为合适的方法确实是更新 WSDriver 以将 sink$ 作为输入。此 sink$ 可能包含您要连接的 url。

你的 driver 看起来像这样

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
}

在 app 方面，您需要更改此

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

在你的 main

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

鉴于 newConnection$ 来自按钮上的点击事件。

希望对您有所帮助

在循环js中动态更新源和接收器？

Update source and sink dynamically in cycle js?

redux

cyclejs