React + Redux: дождаться разрешения асинхронного действия - PullRequest
Новая
       16

React + Redux: дождаться разрешения асинхронного действия

0 голосов
/ 18 января 2019

Я новичок в мирах React и Redux, и после долгих исследований я не нашел способа справиться с возникшей проблемой:

Мне нужно выполнить вызов API для init приложения, но конечная точка находится в файле конфигурации. Эта конфигурация на сервере, поэтому она должна быть загружена и прочитана. Это потому, что мне нужно распределить приложение по многим серверам, и каждый сервер имеет свою конфигурацию.

Поэтому вызов API должен ждать, пока конфигурация будет загружена, они должны быть связаны.

Я использую Redux для управления состоянием приложения, поэтому у меня есть действие, которое загружает конфигурацию, и другое действие, которое выполняет вызов API. 

// Config action
export function fetchConfigRequest() {
    return {
        type: types.FETCH_CONFIG_REQUEST
    }
}

export function fetchConfigSuccess(config) {
    return {
        type: types.FETCH_CONFIG_SUCCESS,
        config
    }
}

export function fetchConfig() {
    return dispatch => {
        dispatch(fetchConfigRequest());

        return axios.get('config.json')
            .then(response => {
                dispatch(fetchConfigSuccess(response.data));
            })
        ;
    };
}

// Api client action
export function fetchDataRequest() {
    return {
        type: types.FETCH_DATA_REQUEST
    }
}

export function fetchDataSuccess(data) {
    return {
        type: types.FETCH_DATA_SUCCESS,
        data
    }
}

export function fetchDataError(error) {
    return {
        type: types.FETCH_DATA_ERROR,
        error
    }
}

export function fetchData(filters = {}) {

    return dispatch => {

        dispatch(fetchDataRequest());

        const apiClient = new apiClient({
            url: state.config.apiEndpoint
        });

        return apiClient.Request()
            .then(response => {
                dispatch(fetchDataSuccess(data));
            })
        ;
    };
}

Единственный способ заставить его работать - подождать, пока обещание действия конфигурации не разрешится в компоненте приложения, например так: 

// App.component.js
componentDidMount() {
    this.props.fetchConfig().then(() => {
        this.props.fetchData();
    });
}

Но я не думаю, что это лучший и самый "Redux-стиль" способ сделать это, так как мне это сделать?

У меня есть некоторые идеи, но я не знаю, что было бы лучше:

  • Оставь как есть
  • Создать действие «приложение», которое отправляет действие конфигурации извлечения, ожидает загрузки конфигурации и отправляет действие извлечения данных
  • Сделайте это в пользовательском промежуточном программном обеспечении

Спасибо!

...