Estoy usando react-router v4 y redux-saga. Estoy intentando hacer una llamada API cuando se carga una página. Cuando visito/detailpage/slug/, mi aplicación parece atascarse en un bucle y realiza llamadas interminables a mi punto final API. Así es como se configura mi aplicación. Suponga que mis importaciones son correctas.

index.js

const history = createHistory()
const sagaMiddleware = createSagaMiddleware()
const middleware = [routerMiddleware(history), sagaMiddleware]

const store = createStore(
  combineReducers({
    aReducer
  }),
  applyMiddleware(...middleware)
)

injectTapEventPlugin();
sagaMiddleware.run(rootSaga)


ReactDOM.render(
  <Provider store={store}>
  <ConnectedRouter history={history}>
    <Switch>
      <Route path="/" exact component={HomePage} />
      <Route path="/detailpage/:slug" component={Detail} />
      <Route path="/page" component={Page} />
    </Switch>
  </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

reductores / index.js

const aReducer = (state={}, action) => {
  switch(action.type) {
    case 'SHOW_DETAIL':
    console.log('Reducers: reducer called')
    return Object.assign({}, state, { name: 'adfsdf' })
  default:
    return state;
  }
}
export default aReducer;

actions / index.js

export const showDetailInfo = () => {
  console.log('action called')
  return {
    type: 'SHOW_DETAIL'
  }
}

saga.js

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()
  ]
}

contenedores / Detail.js

const mapStateToProps = (state) => {
  return {
    name: 'Test'
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  console.log('mapDispatchToProps')
  return {
    showDetailInfo: (payload) => {
      console.log('dispatching');
      dispatch({ type: 'SHOW_DETAIL' })
    }
  }
}

const Detail = connect(
  mapStateToProps,
  mapDispatchToProps
)(DetailPage)

export default Detail;

componentes / DetailPage.js

class DetailPage extends React.Component {

  componentWillMount() {
    this.props.showDetailInfo();
  }

  render() {
    return (
      <Layout>
      <h3>DetailPage</h3>
      <p>{ this.props.name }</p>
      </Layout>
    )
  }
}

DetailPage.PropTypes = {
  showDetailInfo: PropTypes.func.isRequired,
  name: PropTypes.string.isRequired
}

export default DetailPage;

Pasé unos días solucionando problemas, probando varias ideas, incluida la prueba de diferentes métodos de ciclo de vida, eliminando el routerMiddleware de applyMiddleware.

Pensé que mi componente se estaba actualizando después de cada llamada a la API, pero console.log de cualquiera de los métodos del ciclo de vida indica que no es así.

Al ser un ecosistema nuevo para reaccionar, hay muchas partes móviles aquí y es un problema para mí resolver problemas.