title: Infinite loop with redux-saga
body: <p>I'm using react-router v4 and redux-saga. I'm attempting to make an API call when a page loads.  When I visit <code>/detailpage/slug/</code>, my application seems to get stuck in a loop and makes endless calls to my API endpoint. Here's how my application is setup. Assume my imports are correct.</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const history = createHistory()
  const sagaMiddleware = createSagaMiddleware()
  const middleware = [routerMiddleware(history), sagaMiddleware]
  
  const store = createStore(
    combineReducers({
      aReducer
    }),
    applyMiddleware(...middleware)
  )
  
  injectTapEventPlugin();
  sagaMiddleware.run(rootSaga)
  
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
    &lt;ConnectedRouter history={history}&gt;
      &lt;Switch&gt;
        &lt;Route path="/" exact component={HomePage} /&gt;
        &lt;Route path="/detailpage/:slug" component={Detail} /&gt;
        &lt;Route path="/page" component={Page} /&gt;
      &lt;/Switch&gt;
    &lt;/ConnectedRouter&gt;
    &lt;/Provider&gt;,
    document.getElementById('root')
  );
  </code></pre>
  
  <p><strong>reducers/index.js</strong></p>
  
  <pre><code>const aReducer = (state={}, action) =&gt; {
    switch(action.type) {
      case 'SHOW_DETAIL':
      console.log('Reducers: reducer called')
      return Object.assign({}, state, { name: 'adfsdf' })
    default:
      return state;
    }
  }
  export default aReducer;
  </code></pre>
  
  <p><strong>actions/index.js</strong></p>
  
  <pre><code>export const showDetailInfo = () =&gt; {
    console.log('action called')
    return {
      type: 'SHOW_DETAIL'
    }
  }
  </code></pre>
  
  <p><strong>saga.js</strong></p>
  
  <pre><code>export function* fetchDetailsAsync() {
    try {
      console.log('fetching detail info')
      const response = yield call(fetch, 'http://localhost:8000/object/1/', {
      method: 'GET',
      headers: {
        'Authorization': 'Token xxxxxxxxxxxx'
      }})
  
      console.log(response);
  
      yield put({type: 'SHOW_DETAIL', response: response.data})
    } catch (e) {
      console.log('error')
    }
  }
  
  // watcher saga
  export function* fetchDetails() {
    console.log('watcher saga')
    yield takeEvery('SHOW_DETAIL', fetchDetailsAsync)
  }
  
  export default function* rootSaga() {
    console.log('root saga')
    yield [
      fetchDetails()
    ]
  }
  </code></pre>
  
  <p><strong>containers/Detail.js</strong></p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      name: 'Test'
    }
  }
  
  const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    console.log('mapDispatchToProps')
    return {
      showDetailInfo: (payload) =&gt; {
        console.log('dispatching');
        dispatch({ type: 'SHOW_DETAIL' })
      }
    }
  }
  
  const Detail = connect(
    mapStateToProps,
    mapDispatchToProps
  )(DetailPage)
  
  export default Detail;
  </code></pre>
  
  <p><strong>components/DetailPage.js</strong></p>
  
  <pre><code>class DetailPage extends React.Component {
  
    componentWillMount() {
      this.props.showDetailInfo();
    }
  
    render() {
      return (
        &lt;Layout&gt;
        &lt;h3&gt;DetailPage&lt;/h3&gt;
        &lt;p&gt;{ this.props.name }&lt;/p&gt;
        &lt;/Layout&gt;
      )
    }
  }
  
  DetailPage.PropTypes = {
    showDetailInfo: PropTypes.func.isRequired,
    name: PropTypes.string.isRequired
  }
  
  export default DetailPage;
  </code></pre>
  
  <p>I've spent a few days troubleshooting, trying various ideas including testing different lifecycle methods, removing the routerMiddleware from applyMiddleware.</p>
  
  <p>I thought that my component was updating after every API call, but console.log from any of the lifecycle methods indicates that it's not.</p>
  
  <p>Being new to react ecosystem, there are a lot of moving parts here and it's challenging for me to troubleshoot. </p>