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

Question

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

Answer 1

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

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

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

Answer 2

您可以monkeypatch addEventListener（请参见this）

// The magic code
var oldAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function(eventName, eventHandler)
{
  oldAddEventListener.call(this, eventName, function(event) {
      console.log(event);
      eventHandler(event);
  });
};

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

Answer 3

您可以使用例如react-idle-timer。

使用以下命令导入组件

：

import IdleTimer from 'react-idle-timer';

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

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

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