在window.scroll

时间:2017-02-22 05:27:26

标签: reactjs redux react-redux

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

2 个答案:

答案 0 :(得分:3)

您可以connect执行滚动的组件。或者您可以将props传递给具有商店信息的组件。这是推荐到达商店的两种方式。话虽如此,您也可以查看上下文

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

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

注意:上下文是选择加入;你必须在组件上指定contextTypes才能获得它。

阅读React's Context doc这可能不是一个完整的解决方案,因为它可能会在将来的版本中弃用

编辑:

根据您提供的清晰度,您可以执行此操作。

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

我在这里将lodash添加到导入中,因此您可以限制滚动侦听器功能。你只想每秒多次调用处理函数,或者它可以开始滞后于页面(取决于监听器函数的重量)

答案 1 :(得分:0)

在组件中访问应用程序状态的正确方法是使用react-redux和选择器函数。

react-redux提供了一个名为connect的函数。您应该使用此函数来定义要映射到组件的道具的状态中的哪些值,以便这些值可用。

此映射所需的函数称为mapStateToProps,它返回一个对象,该对象具有应传递给组件的值。

您还可以定义应该在组件中使用的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);