React and Redux, call with Dispatch to re-loop causing class-based component

Question

My application combines React and Redux

I have a class-based component called Login.js, a Slice called settingsSlice.js, and I’m using connect to access the state of that component.

My files:

settingsSlice.js

const initialState = {
    initial: initialSettings,
    defaults: _.merge({}, initialSettings),
    current: _.merge({}, initialSettings),
    themes: initialThemes
};

const settingsSlice = createSlice({
    name: 'settings',
    initialState,
    reducers: {
        setSettings: (state, action) => {
            const current = generateSettings(state.defaults, action.payload);
            const themes = state.themes;
            return {
                ...state,
                current,
                themes
            };
        }
    }
});

export const { setSettings } = settingsSlice.actions;

Login.js (summarized to not get too long)

import React from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import { compose } from 'redux';
import { setSettings } from 'app/store/fuse/settingsSlice';
import { withStyles } from '@material-ui/core/styles';
import { withTranslation } from 'react-i18next';
import queryString from 'query-string';

const customStyles = theme => ({
    root: {
        /*...*/
    },
});

class Login extends React.Component {

    componentDidMount() {

        let params = queryString.parse(this.props.location.search);

        if (params.idvisu) {
            this.getIdVisu(params.idvisu)
                .then(resp => {
                    this.props.onSetSettings(resp.settings);
                }).catch(message => {
                    console.log('ID Visual Error:' + message);
                });
        } 

    }

    getIdVisu = (idvisu) => {
        return new Promise((resolve, reject) => {
            axios.get(process.env.REACT_APP_API_URL + '/api/idvisu/' + idvisu)
                .then(res => {
                    if (res.data.status) {
                        resolve(res.data.result);
                    } else {
                        reject(res.data.message);
                    } 
                });
        });
    }

    render() {

        const { t, classes } = this.props;
        const { idvisu_data } = this.state;

        return (
            <div>
                Formulario de login e UI...
            </div>
        )
    }

}

Login.propTypes = {
    classes: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
    return { 
        settings: state.settings
    }
}

function mapDispatchToProps(dispatch) {
    return {
        onSetSettings: (settings) => {
            dispatch(setSettings(settings));
        }       
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(
    compose(
        withTranslation('login'),
        withStyles(customStyles)
    )(Login)
)

Explanation of what I’m trying to do:

In the Login.js file I inform the data that I would like to rescue through the function mapStateToProps() and what actions would you like to fire through mapDispatchToProps().

So far, everything is working fine, if I run console.log(this.props) inside the component I can see the States I needed and also the onSetSettings function.

My goal is if I pass a specific parameter via URL (params.idvisu), that the system loads via request (API) the settings it found, and save them to the state of the Redux through the onSetSettings action.

After completion of the request, when I call the function this.props.onSetSettings(resp.settings); it loops and React shuts down the APP.

What could I be doing wrong? If I create a button and in onClick I call this function directly it works, it is only when I try to call in the componentDidMount that it happens.