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＆＃34;额外参数＆＃34;为此，您的组件不需要知道实际的套接字对象：

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))
    })
  }

使用socketio with react redux

1 个答案: