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.