1

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

  1. 用于输入 url 的文本字段
  2. 连接到 websocket 端点的“连接”按钮
  3. 显示传入消息的输出面板

我已经根据这个答案编写了一个非常简单的 websocket 驱动程序https://stackoverflow.com/a/42926532/842860

连线代码是这样的：

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 是否提供了一种动态更新源/接收器的方法？

4

1 回答 1

2

我认为适当的方法实际上是更新WSDriver以将 asink$作为输入。这sink$可能包含您要连接的 url。

您的驱动程序看起来像这样

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$来自按钮上的点击事件。

希望能帮助到你

于 2017-07-06T14:00:19.260 回答