Infinite loop with redux-saga

Question

I\'m using react-router v4 and redux-saga. I\'m attempting to make an API call when a page loads. When I visit /detailpage/slug/, my application seems to get s

Answer 1

Of course, you explicitly set the infinite loop the next lines:

yield put({type: 'SHOW_DETAIL', response: response.data})
// ...
yield takeEvery('SHOW_DETAIL', fetchDetailsAsync)

The saga doesn't do any magic things for you, and only is a preliminary layer of a subscription and generation on actions and executions coroutines.

SOLUTION:

You shall use different names for actions which you catch from React components, and actions which are used for optimistical and real up-dating of a status.

Use yield takeEvery('SHOW_DETAIL_REQUEST', fetchDetailsAsync) and name your action in this manner.

Use yield put({type: 'SHOW_DETAIL_SUCCESS', response: response.data}) in success response and name your reducer in this manner

More than that, you can use 'SHOW_DETAIL_FAILURE' for failed saga request.

All names above are common-used case.