title: React/Redux - Infinite Scrolling/Load More from API
body: <p><strong>In Short:</strong> I am fetching 21 JSON Objects from an API with X amount of Objects, I then want to fetch the next 21 Objects from the API when the user scrolls down the page. I have tried several options without luck, and my last option is to ask the clever developers in here.</p>
  
  <p>I have never tried this before, so if someone would be kind and showcase a tip/solution, making a example out of my component, that would be much appreciated!</p>
  
  <p>I'v tried using <a href="https://github.com/RealScout/redux-infinite-scroll" rel="noreferrer">https://github.com/RealScout/redux-infinite-scroll</a>, but I cant wrap my head around it.</p>
  
  <p><strong>Here is my component, where I am fetching all the teams on componentDidMount and then getting all the JSON objects from my reducer:</strong></p>
  
  <pre><code>    import React, { Component } from 'react'
      import { APIManager, DateUtils, YouTubeID } from '../../utils'
      import actions from '../../actions'
      import { connect } from 'react-redux'
      import  { Link, browserHistory } from 'react-router'
  
  
      class teams extends Component {
        constructor () {
          super()
          this.state = {
  
          }
        }
  
        selectTeam(team, event){
        event.preventDefault()
        this.props.selectTeam(team)
       }
  
        componentDidMount(){
          if(this.props.teams != null){
            return
          }
          this.props.fetchTeams()
        }
  
        componentDidUpdate(){
          if(this.props.teams != null){
            return
          }
          this.props.fetchTeams()
        }
  
        render(){
          return(
   &lt;div className="scrollable-content-container"&gt;
   &lt;ol className="portal-list-members debutants scrollable"&gt;
  
  {(this.props.teams == null) ? null :
    this.props.teams.map((team, i) =&gt; {
  
      return (
        &lt;li onClick={this.selectTeam.bind(this, team.teamname)} key={i} className="group"&gt;
          &lt;h3&gt;
          &lt;Link to={'/team'} style={{color: '#444', textTransform: 'capitalize'}} className="url hoverable" href="#"&gt;
            &lt;img style={{height: '160px', width: '160px'}} className="photo" src={"images/"+team.image}/&gt;
          {team.teamname}
        &lt;/Link&gt;
        &lt;/h3&gt;
      &lt;/li&gt;
      )
    })
  }
  &lt;/ol&gt;
        &lt;/div&gt;
          )
        }
      }
  
      const stateToProps = (state) =&gt; {
        return {
            teams: state.players.teams
        }
      }
  
      const dispatchToProps = (dispatch) =&gt; {
        return {
          selectTeam: (team) =&gt; dispatch(actions.selectTeam(team)),
          fetchTeams: (params) =&gt; dispatch(actions.fetchTeams(params))
        }
      }
  
      export default connect(stateToProps, dispatchToProps)(teams)
  </code></pre>