Redux-thunk создатель действий с несколькими вызовами диспетчеризации помещает компонент в бесконечный цикл
Мой компонент застревает в цикле, когда я использую избыточный поток с несколькими диспетчерами действий в создателе действий. Это мой файл action.js:
import * as types from './../constants/actionTypes';
export const fetchData = (id, data) => (dispatch) => {
dispatch({ type: types.BEGIN_API_CALL });
return myAPI.getData(id, data).then(
response => {
dispatch({
type: types.LOAD_DATA_SUCCESS,
response
});
},
error => {
dispatch({
type: types.API_CALL_ERROR,
message: error || 'Something went wrong.'
});
});
};
В моем файле API я пытаюсь вызвать мой сервис с библиотекой adal.js для аутентификации.
Это мой API:
import { serviceConfig } from '../constants/appSettings';
class myAPI {
static getData(id, data) {
return new Promise((resolve, reject) => {
window.authContext.acquireToken(serviceConfig.resourceId, (errorDesc, token, error) => {
if (error) {
reject('Something is wrong with our service, please try again later!');
}
else {
resolve(fetch(`${serviceConfig.resourceBaseAddress}/Configuration/${id}`, {
headers: {
'Authorization': `Bearer ${token}`,
'Accept': 'application/json',
'Content-type': 'application/json'
},
method: "POST",
body: JSON.stringify(data)
}).then(response => {
if (response.status === 200) {
return response.json();
}
else if (response.status === 403 || response.status === 401) {
reject("You are not authorized to see this content!");
}
else {
reject(response.statusText);
}
})
);
}
});
});
}
}
export default myAPI;
Когда я использую store.dispatch() в моем файле index.js, он работает нормально, но если я подключаю свой компонент и в этих компонентах вызываю метод жизни cicyle fetchData(), я получаю бесконечный цикл, где я получаю данные все время, а componentDidMount() звонил также каждый раз. Составная часть:
....
componentDidMount() {
this.props.fetchData("stringID", {});
}
....
export default connect(mapStateToProps, { fetchData })(withStyles(styles)(myComponent));