[React] React e Redux, chamada com dispatch ao reducer causando loop em componente baseado em...

Minha aplicação combina React e Redux

Tenho um componente baseado em classe chamado Login.js, um slice chamado settingsSlice.js e estou usando connect para acessar o estado nesse componente.

Meus arquivos:

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 (resumido para não ficar muito extenso)

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)
)


Explicação do que estou tentando fazer:

No arquivo Login.js eu informo os dados que eu gostaria de resgatar através da função mapStateToProps() e quais ações gostaria de disparar através de mapDispatchToProps().

Até ai, tudo funcionando bem, se eu rodar console.log(this.props) dentro do componente eu consigo visualizar os states que eu precisava e também a função onSetSettings.

O meu objetivo é se eu passar um parâmetro especifico via URL (params.idvisu), que o sistema carregue via request (API) as configurações que ele encontrou e salve elas no state do redux através da action onSetSettings.

Após a finalização da request, quando eu chamo a função this.props.onSetSettings(resp.settings); ele entra em loop e o React encerra o APP.

O que eu posso estar fazendo de errado? Se eu crio um botão e no onClick eu chamo essa função diretamente ela funciona, é somente quando eu tento chamar no componentDidMount que isso acontece.

Continue reading...