1
I’m trying to do an "Infinite Scrolling (I used this Realscout plugin)", but even without reaching the bottom of the page, it always makes new requests, without stopping. Look at the image:
Follows my code:
jsx phrases.
import InfiniteScroll from 'redux-infinite-scroll'
import { loadMore } from './frasesActions'
class Frases extends Component {
constructor(props) {
super(props)
}
componentWillMount() {
this.props.loadMore()
}
renderRows() {
const listFrases = this.props.listFrases || []
return listFrases.map((item, index) => (
<Grid styleCss='frase' cols='12 12 12' key={item.id}>
. . .
</Grid>
))
}
render() {
return (
<Container>
<Row>
<Grid cols='12 12 6' offsets='0 0 3' id='content'>
<Row id='frases'>
<InfiniteScroll
loadMore={this.props.loadMore}>
{this.renderRows()}
</InfiniteScroll>
</Row>
</Grid>
</Row>
</Container>
);
}
}
const mapStateToProps = state => ({ listFrases: state.frases.listFrases, user: state.auth.user })
const mapDispatchToProps = dispatch => bindActionCreators({ loadMore }, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(Frases)
frasesActions.js
import axios from 'axios'
import consts from '../consts'
export function getFrases(start, limit) {
const request = axios.get(`${consts.OAPI_URL}/frases/${start}/${limit}`, axios.defaults)
return request
}
export function loadMore() {
console.log("chamou")
return (dispatch, getState) => {
let state = getState()
let list = state.frases.listFrases;
let tmpList;
let pageNum = 0;
let itemCount = 15;
if (list.length == 0) {
pageNum = 0
} else {
pageNum = list.length / itemCount + 1
}
getFrases(pageNum, itemCount).then(function (obj) {
tmpList = list.concat(obj.data.frases)
dispatch({
type: 'FRASES_CARREGADO',
payload: {data: {
frases: tmpList,
validToken: state.auth.validToken
}}
})
})
}
}
frasesReducer.js
const INITIAL_STATE = {
listFrases: []
}
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'FRASES_CARREGADO':
return { ...state,
listFrases: action.payload.data.frases
}
default:
return state
}
}