Question

我是React和Redux领域的新手，经过大量研究，我还没有找到解决我所遇到问题的方法：

我需要在应用程序init上执行api调用，但是端点位于配置文件中。服务器中的此配置，因此必须下载并阅读。这是因为我需要将应用程序分发到许多服务器中，并且每个服务器都有不同的配置。

因此，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));
            })
        ;
    };
}

我要使其正常工作的唯一方法是等待，直到config action promise在App组件中像这样解决：

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

但是我不认为这是最好，最“ Redux风格”的实现方式，那么我应该怎么做呢？

我脑子里有一些想法，但我不知道什么是最好的：

保持现状
创建一个“ app”操作，该操作将分派fetch config操作，等到加载配置后再分派fetch data操作
将其用于自定义中间件

谢谢！

React + Redux：等待异步操作解决

0 个答案: