Reactjs 集中捕获react应用程序中的所有用户交互

我需要在React ex:-单击、滚动等中捕获用户交互。我正在寻找一种方法，以便集中捕获这些事件，这样我就不必在应用程序中的每个组件中编写代码。是否有任何侦听器或其他东西可以集中捕获所有这些事件？

您可以为redux创建自定义中间件，并使用它记录用户操作。 在这种情况下，您将只能捕获通过dispatch方法传递的操作

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

以下是如何将其应用于Redux商店：

import { createStore, combineReducers, applyMiddleware } from 'redux'
​
const app = combineReducers(reducers)
const store = createStore(
  app,
  applyMiddleware(logger)
)

---

您可以通过此阅读更多有关中间件的信息。

您可以使用monkeypatch addEventListener（请参阅）

警告：您必须确保在注册任何事件之前覆盖addEventListener函数。

您可以使用此函数

使用以下内容导入组件：

import IdleTimer from 'react-idle-timer';

然后在渲染方法中添加如下内容：

<><IdleTimer onAction={(e) => console.log('event happened: ', e)} /><YourLayoutComponent /></>

console.log（'事件发生：'，e）}/>

在移动和单击页面时，您应该会得到类似的结果：

---

您是否使用redux或类似的软件，或者它是纯React应用程序？@PavelKozlov yeah！我也是，耶！但是没有为点击、滚动等定义任何操作。我想知道没有中间件我如何做到这一点。你可以在点击时调用其他操作。您还可以通过文档api订阅滚动和单击事件。不修改现有应用程序也可以吗？我不想修改现有组件代码您可以尝试添加这些侦听器，例如在主容器中您可以将document.addEventListener（“单击”，yourActionFunction）添加到顶级容器组件中。它是一个组件，您可以通过connect方法将redux连接到该组件。顶级1它是当您从设置提供者存储的位置深入查看子级时出现的第一个。

<><IdleTimer onAction={(e) => console.log('event happened: ', e)} /><YourLayoutComponent /></>