yield takeEvery keeps getting called - reactjs

Question

I'm trying to learn react-redux-saga; so i'm building a simple app which calls a random user profile api and just displays it. Basically when the user hits the button "next image" it should make a REST call and retrieve the next image. I was able to make the API call and display the information but it keeps constantly calling the API infinitely and the data keeps changing despite not clicking anything. Here is my code:
App.js (Parent component)
class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<p className="App-intro">
{ this.props.user !== undefined ? <ImageGenerator user={this.props.user}></ImageGenerator> : <span></span>}
</p>
</div>
);
}
}
const mapStateToProps = state => {
return { user: state.value };
};
const mapDispatchToProps = dispatch => {
return {
getNewImage: () =>
dispatch({
type: NEXT_IMAGE
})
}
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
This component is the one that makes the API call and passes the information onto the ImageGenerator component via the user prop. I noticed when I comment out the ImageGenerator line the API calls stop. I also put a log in mapDispatchToProps to verify that it's only dispatching the NEXT_IMAGE action once.
Here are my actions:
export const NEXT_IMAGE = function() { return { type: "NEXT_IMAGE" } };
export const fetchFailed = function(error) { return { type: "FETCH_FAILED", value: error } };
export const setImage = function(data) { return {type: "SET_IMAGE", value: data} };
Here is my saga:
export function* fetchImage() {
try {
const response = yield call(fetch, 'https://randomuser.me/api/');
const responseBody = yield response.json();
console.log("QWERT", responseBody.results);
yield put(setImage(responseBody.results[0]));
} catch (e) {
yield put(fetchFailed(e));
}
return;
}
export function* watchNextImage() {
yield takeEvery(NEXT_IMAGE, fetchImage);
}
export default function* rootSaga() {
yield all([
fetchImage(),
watchNextImage()
])
}
I have a suspicion it has to do with my watchNextImage function in my saga. That's the thing that puts a watch on the NEXT_IMAGE action and then calls fetchImage if it occurs. However, I don't understand why it would keep calling fetchImage if I only dispatched the NEXT_IMAGE action once...
Heres my reducer and my ImageGenerator - Probably nothing to interesting here:
reducer.js:
const rootReducer = (state = {}, action) => {
switch(action.type) {
case NEXT_IMAGE: {
return Object.assign({}, state, action)
}
case "FETCH_FAILED": {
return state;
}
case "SET_IMAGE": {
return Object.assign({}, state, action)
}
default: {
return state;
}
}
};
export default rootReducer;
ImageGenerator.js:
class ImageGenerator extends Component {
constructor(props) {
super(props);
}
render() {
let user = this.props.user;
console.log("USer", user);
return (
<div>
Name: {user.name.first} {user.name.last} <br />
Phone: {user.phone} <br />
Date of Birth: {user.dob.date} <br/>
Age: {user.dob.age} <br/>
Email: {user.email} <br />
Gender: {user.gender} <br/>
City: {user.location.city } <br />
State: {user.location.State } <br />
Street: {user.location.street } <br />
<img src={user.picture.medium} alt="No Image Found"/>
<button onClick={NEXT_IMAGE}>New Image</button>
<button>Add to Favorites</button>
</div>
)
}
}
export default ImageGenerator

Answer 1

Change rootSaga to only yield watchNextImage (the saga). You do not need to yield fetchImage (the side effect).
export default function* rootSaga() {
yield all([
spawn(watchNextImage)
])
}
After that, you just need to wire up your action correctly in your component.