ComponentDidMount infinite loop - node.js

Question

first of all I'd like to say I have read about the subject and I still can't understand what's happening, so sorry in advance if it's a duplicate. component that fetches data from a server on componentDidMount, but somehow it enters an infinite loop. I am using react router & redux saga and the parent of said component is also connected to the redux store (I think this is the problem).
App.js render method:
render() {
console.log(this.props.isAuthenticated);
let routes = (
<Switch>
<Route path="/login" component={Login} />
<Route path="/" exact component={Home} />
<Redirect to="/" />
</Switch>
);
if (this.props.isAuthenticated) {
routes = (
<Switch>
<Route path='/logout' component={Logout} />
<Route path='/data/people' component={People} />
<Route path="/" exact component={Home} />
<Redirect to="/" />
</Switch>
)
}
return (
<div>
<Layout>
{routes}
</Layout>
</div>
);
}
Call to fetch data (Called in People.js):
componentDidMount() {
this.props.fetchPeople()
}
App.js redux connection:
const mapStateToProps = state => {
return {
isAuthenticated: state.login.token !== null,
username: state.login.username
};
};
const mapDispatchToProps = dispatch => {
return {
autoLogin: () => dispatch(actions.checkLoginState())
}
};`
People.js redux connection:
const mapStateToProps = state => {
return {
people: state.data.people,
loading: state.data.loading
};
};
const mapDispatchToProps = dispatch => {
return {
fetchPeople: () => dispatch(actions.fetchPeople())
};
};
actions.fetchPeople calls this saga:
export function* fetchPeopleSaga () {
try {
yield put(actions.fetchPeopleStart());
const people = yield axios.get('/data/people');
yield put(actions.fetchPeopleSuccess(people));
} catch (error) {
yield put(actions.fetchPeopleFail(error));
}
};
And here's the relevant reducer:
const initialState = {
people: null,
error: null,
loading: false
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case actionTypes.FETCH_PEOPLE_START:
return {
...state,
loading: true
}
case actionTypes.FETCH_PEOPLE_SUCCESS:
return {
...state,
people: action.people,
loading: false
}
case actionTypes.FETCH_PEOPLE_FAIL:
return {
...state,
people: null,
error: action.error,
loading: false
}
default:
return state
}
};
As you can see they aren't even accessing the same props, so I don't understand why it enters infinite rendering.
Help would be much appreciated!

Answer 1

You can add another state loaded and set it to true in case of either FETCH_PEOPLE_SUCCESS or FETCH_PEOPLE_FAIL. Then, add a check for both loaded and loading before you fetch people data, something like:
if (!loaded && !loading) {
this.props.fetchPeople()
}

Answer 2

ComponentDidMount get called once unless you redirect to that page again.
Please check, you must be getting redirecting on that page/component again and again.