title: React Redux infinite loop
body: <p>I have the intention to perform a fetch to my rest api when ever the user updates an input bar. The problem I am having is that the componentDidUpdate method calls the action creator which dispatches the json to the reducer, in turn updating the state and calling componentDidUpdate again. Any ideas or best practices to end the endless cycle? Thanks! </p>
  
  <p>Action Creator:</p>
  
  <pre><code>export const fetchFoods = (dispatch, searchText) =&gt; {
    return fetch(`/nutrition/${searchText}`)
      .then(res =&gt; res.json())
      .then(json =&gt; dispatch({type: 'RECEIVE_FOODS', json}))
  }
  </code></pre>
  
  <p>Reducer:</p>
  
  <pre><code>const foods = (state = [], action) =&gt; {
    switch (action.type) {
      case 'RECEIVE_FOODS':
        return action.json
      default:
        return state
    }
  }
  </code></pre>
  
  <p>React Container:</p>
  
  <pre><code>const FoodList = React.createClass({
    componentDidUpdate: function() {
      fetchFoods(this.props.dispatch, this.props.searchText)
    },
    componentWillMount: function() {
      fetchFoods(this.props.dispatch, this.props.searchText)
    },
    render: function() {
      ...
    }
  })
  
  export default connect(
    (state) =&gt; {
      return {searchText: state.searchText, foods: state.foods}
    }
  )(FoodList)
  </code></pre>