Question

当前，我正在构建一个严重依赖API调用的应用程序。 api调用是在Thunk中间件的Redux动作中完成的，如下所示：

export const brand_fetchAll = () => {
return dispatch => {
    fetch(apiURL+'brand')
        .then(response => {return response.json();})
        .then(content => {
            dispatch({
                type: 'BRAND_STORE_ALL',
                content
            })
        })
        .catch(error => console.log(error))
}}

在我的组件中，我首先通过单独的操作获取数据。之后，我要打开一个编辑器：

// A component method
editModeOn(){
    // Fetch data
    this.props.dispatch(campaign_fetchAll());
    this.props.dispatch(brand_fetchAll());
    // Open editor
    this.props.dispatch(page_editModeOn());
}

现在，编辑器将在api调用完成之前打开，因此不会显示任何数据。可以在操作中链接调度程序，但是我想保持模块化，因此不必创建数百个自定义API调用。理想情况下，我要使用promise将它们链接起来：

    // A component method
editModeOn(){
    this.props.dispatch(campaign_fetchAll().then(brand_fetchAll()).then(page_editModeOn());
}

不幸的是，我还没有开始工作。我希望有人能帮助我。如果您需要更多信息，我很乐意将其移交给我们。也欢迎更好的主意：）

提前谢谢！

Answer 1

您可以选择使用回调函数吗？

因此将您的代码更新为

export const brand_fetchAll = (callback) => {
return dispatch => {
    fetch(apiURL+'brand')
        .then(response => {return response.json();})
        .then(content => {
            dispatch({
                type: 'BRAND_STORE_ALL',
                content
            });

            callback();
        })
        .catch(error => console.log(error))
}}

// A component method
editModeOn(){
    // Fetch data
    this.props.dispatch(campaign_fetchAll());
    this.props.dispatch(brand_fetchAll(() => {
        // Open editor
        this.props.dispatch(page_editModeOn());
    }));        
}

您正在将回调链接到api调用成功的末尾，但是，由于要根据用途传递此回调，因此您并未紧密耦合它的含义。

React Redux重击-链接调度

1 个答案: