将socketio与react redux一起使用

Question

我正在使用 react、redux、socketio 和带有 mongoose 的节点构建一个小型聊天应用程序。通常，redux 流经操作（进行 API 调用和接收数据）并分派数据。但在我的情况下，套接字将发出某个事件，但在我们手动从后端发出数据之前它不会返回数据。因此，为了实现正确的 redux 流程，我应该在操作上添加一个套接字事件以检索数据（来自后端）然后调度它，还是有任何其他适当的方法来实现这一点？

这是我打算做的示例代码 操作文件

    function sendMessage(data) {
      return {
        type: SEND_MESSAGE,
        payload: data
      };
    }

    export const sendNewMessage = (socket,data) => {
         return dispatch => {
              socket.emit("send message",data);
              socket.on("new message",function(data){
                  dispatch(sendMessage(data));
               });


    };

};

Answer 1

这对我来说似乎完全合理。我建议为此使用 thunk 的“额外参数”，这样您的组件就不需要知道实际的套接字对象：

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ socket }))
)

export const sendNewMessage = (data) =>
  (dispatch, getState, { socket }) => {
    socket.emit("send message", data)
    socket.on("new message", (data) => {
      dispatch(sendMessage(data))
    })
  }