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

0 ответов

Другие вопросы по тегам