スクロールイベントを還元してリッスンする

Question

ユーザセッション中にスクロール/マウスイベントをリッスンする必要がある、パフォーマンスに影響を受けやすいReduxアプリケーションを構築します。

平易な英語実装は次のようになります。

「成分Aは、ユーザーのビューポートである場合には、ディスパッチFOOアクション」

私の理解から、関数calculateViewPort +比較チェックがで実施される必要があるであろうすべてのスクロールイベントに格納します。

これは過度で遅いようです（まだテストしていません）。

私はまだ検討していない別の実装またはアプローチがありますか？

RxJSのようなものをReduxに使用することを考えていましたが、パフォーマンスのために新しいライブラリを導入し、既存のツールキットで解決することのトレードオフを検討したいと思います。

サガのアプローチがある場合、私はそれについてもよりオープンです。

Answer 1

InfiniteScrollコンポーネントがあります。これを参照してあなたの方法で実装するか、そのまま使用することができます。

注：このコンポーネントはredux-sagaを使用していません。

redux-sagaといっても、最新のapiコール（最後のマウススクロール）からの応答のみを受け取り、takeLatestという効果が得られるようにしてください。

Answer 2

React Visibility Sensorが良い選択です。 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)