Reactjs 获取window.scroll上的redux状态

我想实现分页。因此，当用户向下滚动到底部时，我想进行api调用。我通过窗口看。滚动我可以找到滚动的位置，并可以实现这一点。但是，我想访问redux状态以获取认证数据。由于此事件未被任何组件绑定，因此我将无法传递数据。在这种情况下，正确的方法是什么？ 如果我想通过一个简单的函数访问redux store，我该怎么做？在滚动时，如何确保只通过请求？

您可以选择执行滚动的组件。或者，您可以将道具传递给具有存储信息的组件。这是两种推荐的到达商店的方法。话虽如此，你也可以看看上下文

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

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

注：上下文为选择加入；您必须在组件上指定

contextTypes

，才能获得它

了解它可能不是一个完整的解决方案，因为它可能在将来的版本中被弃用

---

编辑：

根据你提供的清晰的评论，你可以这样做

import React, { Component } from 'react';
import ReactDOM = from 'react-dom';
import _ from 'lodash';

const defaultOffset = 300;

var topOfElement = function(element) {
    if (!element) {
        return 0;
    }
    return element.offsetTop + topOfElement(element.offsetParent);
};

class InfiniteScroll extends Component {
    constructor(props) {
        super(props);
        this.listener = _.throttle(this.scrollListener, 200).bind(this);
    }

    componentDidMount() {
        this.attachScrollListener();
    }

    componentWillUnmount() {
        this.detachScrollListener();
    }

    scrollListener () {
        var el = ReactDOM.findDOMNode(this);
        var offset = this.props.offset || defaultOffset;
        var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        if (topOfElement(el) + el.offsetHeight - scrollTop - window.innerHeight < offset) {
            this.props.somethingHere;
        }
    }

    attachScrollListener() {
        window.addEventListener('scroll', this.listener);
        window.addEventListener('resize', this.listener);
        this.listener();
    }

    detachScrollListener() {
        window.removeEventListener('scroll', this.listener);
        window.removeEventListener('resize', this.listener);
    }

    render() {
        return (...)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(InfiniteScroll);

import React，{Component}来自'React'；
导入ReactDOM=来自“react dom”；
从“lodash”进口；
常数defaultOffset=300；
var topOfElement=函数（元素）{
if（！元素）{
返回0；
}
返回element.offsetTop+topOfElement（element.offsetParent）；
};
类无限扩展组件{
建造师（道具）{
超级（道具）；
this.listener=\ u0.throttle（this.scrollListener，200）.bind（this）；
}
componentDidMount（）{
this.attachScrollListener（）；
}
组件将卸载（）{
this.detachScrollListener（）；
}
滚动侦听器（）{
var el=ReactDOM.findDOMNode（this）；
var offset=this.props.offset | | defaultOffset；
变量scrollTop=（window.pageYOffset！==未定义）？window.pageYOffset:（document.documentElement | | | document.body.parentNode | | document.body）.scrollTop；
if（地形要素（el）+el.offsetHeight-scrollTop-window.innerHeight

---

我在这里的导入中添加了lodash，因此您可以限制滚动侦听器功能。您只需要每秒调用处理程序函数多次，否则它可能会开始延迟页面（取决于侦听器函数的重量）

在组件中访问应用程序状态的正确方法是使用

react redux

和选择器函数

react redux

提供了一个名为

connect

的函数。您应该使用此函数定义要映射到组件道具的状态值，以便这些值可用

此映射所需的函数称为

mapstatetops

，它返回一个对象，其中包含应传递给组件的值

您还可以定义组件中应提供的redux操作（例如，用于触发下一页的加载）。该函数称为

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

---

您可以连接进行滚动的组件？那部分是什么，因为我想调用window.scroll。我不想要一个固定的滚动容器。我想要像facebook一样的东西，当你向下滚动得到新的data@scripter我假设您要制作一个

InfiniteScroll

组件来处理

窗口。滚动
侦听器和所有内容，以便您可以在多个位置使用该代码。我是说可以连接组件（或者如果您不制作无限滚动组件，那么应该请求更多数据的组件都可以连接）。如果没有必要，您不应该通过存储直接使用redux存储。在这种情况下，您应该使用官方模块连接组件和redux存储：
react redux
@正如我在回答中所说的那样。您可以连接组件或传递道具，因为这是推荐的两种方法。但是，context.store目前是一种受支持的方法，也是一种实现此目的的方法。既然OP要求一种方法来完成它，而不需要前两个建议选项，那么第三个（如果不是最佳的）方法就是：）@floriangosse是正确的。你不应该直接使用上下文，除非你必须知道你在做什么。所以，即使你知道自己在做什么，也要小心使用。我没用过，但也许能帮你。@JoPeyper谢谢。我发现有些东西看起来很有趣。