Question: I want to make an api call at the time when my component loads. I have the following code:

```
import React, { Component } from "react";
import { connect } from "react-redux";
import { getProfileDetails } from "../store/actions/profileAction";

class ProfilePage extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.getProfileDetails(this.props.currentUser.user, "");

        console.log("COMPONENTDIDMOUNT");
    }

    render() {
        var { currentUser, getProfileDetails, profile } = this.props;
        return (
            <React.Fragment>
                <h1>Profile Page for {currentUser.user.username} !!</h1>

            </React.Fragment>
        )
    }

}

function mapStateToProps(state) {
    return ({
        currentUser: state.currentUser,
        profile: state.profile
    })
}

export default connect(mapStateToProps, { getProfileDetails })(ProfilePage);

```

The getProfileDetails fucntion:

```
export function getProfileDetails(user, detail) {
    return dispatch => {
        return apiCall("get", `/api/users/profile/${user.id}/${detail}`)
            .then(profileDetail => {
                dispatch(setCurrentProfile(profileDetail, detail));
                dispatch(removeError());
            })
            .catch(err => {
                dispatch(addError(err.message));
            })
    }
}

```

Here the function "**getProfileDetails**" is making an api call and then dispatching a redux store action which is setting the profile details.

The issue is that each time the getProfileDetails gets called, the redux store is updated and the component gets re-rendered, which in turn fires componentDidMount and **it goes into endless loop**.

Please suggest how to structure this.

Answer: 
What is the state property that you want to catch if it changes? For example, if you only want to call a new fetch if the `currentUser` changes, you could do this:

```
componentDidUpdate(prevProps) {
  if (prevProps.currentUser !== this.props.currentUser)
    this.props.getProfileDetails(this.props.currentUser.user, "");
}

```

You would need to initialize your data differently in `componentDidMount`, something like get it from state. Then only re-fetch the details if the user changes.
You should be using `mapDispatchToProps` instead of `mapStateToProps`. The latter only updates the component with existing state.

It looks like the issue you mentioned is discussed in the react-redux docs - <https://redux.js.org/faq/react-redux#react-rendering-too-often>. That might help you debug. 

Please provide the code from the `../store/actions/profileAction` file.