window.scrollで還元状態を取得

Question

ページネーションを実装したい。したがって、ユーザーが下にスクロールすると、私はAPI呼び出しを行いたいと思います。私はwindow.scrollを通して見ます私はスクロールの位置を見つけることができ、それを達成することができます。しかし、私は証明書データを取得するために還元状態にアクセスする必要があります。このイベントはコンポーネントによってバインドされていないため、データを渡すことはできません。このシナリオで正しいアプローチは何でしょうか？ 単純な関数を使ってreduxストアにアクセスしたいのですがどうしたらいいですか？スクロールでは、どのようにリクエストが通過するのを確認するのですか？

Answer 1

connectコンポーネントをスクロールできます。ストア情報を持つコンポーネントに小道具を渡すことができます。それらはあなたの店に達するための2つの推奨された方法です。あなたは文脈を見ることもできると言われています

class MyComponent extends React.Component { 
    someMethod() { 
    doSomethingWith(this.context.store); 
    } 
    render() { 
    ... 
    } 
} 

MyComponent.contextTypes = { 
    store: React.PropTypes.object.isRequired 
}; 

注：コンテキストはオプトインです。コンポーネントを取得するには、コンポーネントにcontextTypesを指定する必要があります。あなたはちょうどこれを行うことができます提供明快さとコメントパー

：それは将来のバージョン

---

編集で廃止される可能性があるのでそれは完全な解決策ではないかもしれないReact's Context doc上に読む

。

スクロールリスナー機能を抑制できるように、インポートにlodashを追加しました。ハンドラ関数を1秒間に何度も呼び出すか、またはページの遅れを開始するだけです（リスナー関数の重さに応じて）

Answer 2

コンポーネントのアプリケーション状態にアクセスする正しい方法は、react-reduxの使用方法です。セレクタ関数。

react-reduxは、connectと呼ばれる機能を提供します。この関数を使用して、状態のどの値をコンポーネントの小道具にマップするかを定義し、これらの値を使用できるようにする必要があります。

このマッピングに必要な機能は、mapStateToPropsと呼ばれ、コンポーネントに渡すべき値を持つオブジェクトを返します。

また、コンポーネントで使用可能にする必要があるレビュックスアクションを定義することもできます（たとえば、次のページの読み込みをトリガーするため）。この関数はmapDispatchToPropsと呼ばれます。ここで

例：

import React from 'react'; 
import { connect } from 'react-redux'; 

import { getUsersPage } from './selectors'; 
import { loadUsersPage } from './actions'; 

class MyComponent extends React.Component { 
    handleScroll() { 
     this.props.loadUsersPage({ page: lastPage + 1 }); 
    } 

    render() { 
     const users = this.props.users; 

     // ... 
    } 
} 

const mapStateToThis = (state) => { 
    return { 
     users: getUsers(state) 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     loadUsersPage: (payload) => { 
      dispatch (loadUsersPage(payload)); 
     } 
    } 
}; 

export default connect()(MyComponent);