如何设计 redux-saga 和 socket-io 动作？

Question

我正在使用socket.io 和redux-saga 开发和react-native 应用程序。
使用this 示例，
我创建了 saga 来监听来自套接字的消息
并发出一个动作。

现在我想知道如何写另一面，
收听dispatch 事件和emit 他们到socket。
在示例中，他只为 write 事件使用了 1 条消息，所以这很简单。

我不希望我的代码看起来像这样：

yield fork(writeEvent1, socket)
yield fork(writeEvent2, socket)
yield fork(writeEvent3, socket)

...

function * writeEvent1 (socket) {
  while (true) {
    yield take(Actions.EVENT_1)
    socket.emit('event-1')
  }
}

function * writeEvent2 (socket{
  ...
}

如何以可读的方式管理这个write 事件？

Answer 1

如果我正确理解您的问题，您希望修改示例以使用更多事件名称，而不仅仅是 message。处理这个问题真的取决于你的用例。如果您想为每条消息使用不同的事件名称，您只需修改 write saga 以具有可变事件名称，如下所示：

function* write(socket) {
  while (true) {
    const { eventName, payload } = yield take(SEND_MESSAGE);
    socket.emit(eventName, payload);
  }
}
...
yield put(sendMessage({eventName: 'foo', payload: { bar: 'baz'}}))

如果您的事件名称列表有限，您仍然可以使用上面的示例，但可能使用某种 const 枚举，例如：

const eventNames = {
    FETCH_USER: 'fetch-user',
    FETCH_ITEM: 'fetch-item',
    FETCH_POST: 'fetch-post',
}
...
yield put(sendMessage({eventName: eventNames.FETCH_USER, payload: { id: 123 }}))

或者，如果您只想区分极少数类型的事件名称，那么有一个明确的 write sagas 是有意义的，例如：

function* write(socket) {
  while (true) {
    const { payload } = yield take(SEND_MESSAGE);
    socket.emit('message', payload);
  }
}

function* writeError(socket) {
  while (true) {
    const { payload } = yield take(SEND_ERROR);
    socket.emit('error', payload);
  }
}