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