redux和侦听滚动事件

构建性能敏感的Redux应用程序，需要在整个用户会话中侦听滚动/鼠标事件

通俗易懂的英语实施将是：

当组件A在用户的视口中时，分派FOO操作

据我所知，在每次滚动事件中，都需要在存储中执行函数calculateViewPort+比较检查

这似乎太过缓慢（尚未测试）

是否还有其他我尚未考虑的实施或方法

<>我想用RXJS之类的东西做ReDux，但是想考虑在我的现有工具包中引入一个新的库来解决它之间的权衡。

如果有一个传奇式的方法，我也更愿意接受。

有一个组件。您可以引用它并以自己的方式实现，也可以按原样使用

注意：此组件未使用

redux saga

最好使用

redux saga

，因为您将只接受来自最新api调用（最后一次鼠标滚动）的有效响应。

在这里可能是一个不错的选择。您可以将组件包装在VisibilitySensor组件中，并在“窗口”视口中调度操作

import React from 'react'
import { connect } from 'react-redux'
import VisibilitySensor from 'react-visibility-sensor'

import CUSTOM_ACTION from 'your-actions'

const CustomComponent = (noticeMe, ...children) => {
      const handleChange = (isVisible) => { if (isVisible) { noticeMe(); } }
      return <VisibilitySensor>{children}</VisibilitySensor>
    }
export connect({}, {
   noticeMe: () => dispatch(CUSTOM_ACTION)
})(CustomComponent)

从“React”导入React
从“react redux”导入{connect}
从“反应可见性传感器”导入可见性传感器
从“您的操作”导入自定义操作
const CustomComponent=（noticeMe，…children）=>{
const handleChange=（isVisible）=>{if（isVisible）{noticeMe（）；}}
返回{children}
}
导出连接（{}{
注意事项：（）=>分派（自定义操作）
})（自定义组件）