在 redux-thunk 中调用另一个异步函数

Posted 2023-02-22

【中文标题】在 redux-thunk 中调用另一个异步函数

【英文标题】：Calling one async function inside another in redux-thunk

【发布时间】：2018-06-29 18:28:24

【问题描述】：

我正在构建一个反应应用程序并使用 redux-thunk 进行异步操作。我有两个函数getActivities() 和createActivity()，我想在成功调用后者后调用前者。但是，如果我将getActivities() 放在createActivity() 的then 块内，它根本不会被调用（这可以通过没有看到我放入getActivities() 的console.log() 来证明）。以下是这两个函数：

export const getActivities = () => dispatch => 
console.log('again');
return axios.get(ENV.stravaAPI.athleteActivitiesBaseEndPoint, autHeaders)
    .then(resp => 
        dispatch(type: actions.GET_ACTIVITIES, activities: resp.data)
    )
    .catch(err => 
        if(window.DEBUG)console.log(err);
    )
;

export const createActivity = data => dispatch => 

dispatch(setLoadingElement('activityForm'));
return axios.post(URL, null, autHeaders)
    .then(resp => 
        if (resp.status === 201) 
            dispatch(emptyModal());
        
        // I WANT TO CALL getActivities() HERE
        dispatch(unsetLoadingElement('activityForm'));
    )
    .catch(err => 
        if(window.DEBUG) console.log(err.response.data.errors);
        dispatch(unsetLoadingElement('activityForm'));
    );
;

如何在另一个内部调用一个？

【参考方案1】：

要从一个动作创建者内部调用另一个动作，您只需要 dispatch dispatch(getActivities()) 之类的动作

export const createActivity = data => dispatch => 

    dispatch(setLoadingElement('activityForm'));
    return axios.post(URL, null, autHeaders)
        .then(resp => 
            if (resp.status === 201) 
                dispatch(emptyModal());
            
            dispatch(getActivities());
            dispatch(unsetLoadingElement('activityForm'));
        )
        .catch(err => 
            if(window.DEBUG) console.log(err.response.data.errors);
            dispatch(unsetLoadingElement('activityForm'));
        );
 ;

【讨论】：

真的很管用！！我完全确信我们只能调度返回动作对象的动作创建者，但不知道调度其他异步函数。非常感谢，您为我节省了很多时间）

没问题，不管是不是thunk，概念都是一样的，唯一的区别在于初始配置，很高兴它帮助了你

【参考方案2】：

getActivites()

这确实成功调用了getActivities()。但是，它返回一个匿名函数，其中包含 console.log() 调用。你在这里忽略这个返回值。

您必须调度返回的函数以确保它被调用：

dispatch(getActivities())