reactjs - Socket.io 和 React Router:如何从套接字处理程序引用浏览器历史记录和其他依赖项?
问题描述
我有一个使用 socket.io 与后端交互的反应应用程序。有一种场景是后端推送消息导致页面发生变化。有没有办法从处理程序中引用反应路由器历史记录,而不必将整个应用程序包装在包装器组件中?请参阅下面的代码示例。
另外,我有一个关于引用调度的后续问题。目前,我将套接字保持在 App 状态(我没有使用 redux,但我使用 useContext 和 useReducer 实现了一个非常基本的 hacky 版本)。因此,当我连接套接字时,我能够为不同的套接字事件设置处理程序并相应地调度操作。但是,我觉得套接字连接不应该与应用程序状态耦合。有没有办法在不使用包装器组件的情况下将应用程序状态的调度作为依赖项传递?目前我以这种方式在组件中引用调度:
const { state, dispatch } = useContext(AppContext);
代码示例:
export function connectSocket() {
return async (dispatch) => {
const socket = await io.connect('', {
path: '/socket.io/',
secure: true,
transports: ['websocket'],
});
socket.on('reconnect_attempt', () => {
socket.io.opts.transports = ['polling', 'websocket'];
socket.io.opts.pingTimeout = 30000;
})
// need to reference history here
socket.on('nextpage', _ => {
history.push('page');
});
// referencing dispatch
socket.on('foo', _ => {
dispatch({
type: actionTypes.foo,
payload: _,
});
});
}
}
谢谢。
解决方案
推荐阅读
- sql - 蜂巢获取计数列的百分比不起作用
- c - 如何在 C 中使用 OpenSSL 3.0 RSA?
- reactjs - 从 React Js 中的数组加载 Owl Carousel 数据
- java - Spring Boot kafka 每两小时监听一次,以防连接丢失发送信息
- ssl - 如何为两个子域使用一个 GCP 负载均衡器?
- r - 聚类分析 - 更改信息时查找唯一用户
- javascript - 移动设备上的 HTML 画布(react-native-canvas)闪烁
- python - Python 无法在同一个兄弟文件夹中导入某些模块
- node.js - Node.js 项目的 Azure Web 服务部署失败
- python - 如何在 python 中使用 Sparql Query 获取个人(实例)和值(文字)