使用Redux-Thunk时如何在ActionCreator中调用回调函数？

嘿，我完全懂你的需求——就是想在API请求成功、Redux状态更新完成之后，触发组件传过来的那个callback函数对吧？其实这事儿特别简单，只需要在axios.get的then回调里，dispatch完action之后直接调用它就行！

我帮你修改了代码，还加了一些健壮性的处理，比如错误捕获和回调存在性判断：

import axios from 'axios';
export const FETCH_USERS = 'FETCH_USERS';
const API_URL_TOP30 = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';
const API_URL_ALLTIME = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';

export function fetchUsers(list, callback) {
  // 修正条件判断的写法，逻辑保持你原来的：list为真时请求总榜，否则请求近期榜
  const apicall = list ? API_URL_ALLTIME : API_URL_TOP30;
  const request = axios.get(apicall);

  return (dispatch) => {
    request
      .then(({ data }) => {
        // 先dispatch更新Redux状态
        dispatch({ type: FETCH_USERS, payload: data });
        
        // 确认callback是函数类型后再调用，避免未传时报错
        if (typeof callback === 'function') {
          // 还可以把请求到的数据传给回调，组件里能直接拿到
          callback(data);
        }
      })
      // 加上错误处理，请求失败时也能通知组件
      .catch((error) => {
        if (typeof callback === 'function') {
          // 用(null, error)的形式，让组件区分成功/失败状态
          callback(null, error);
        }
      });
  };
}

关键点说明： #

• 调用时机：必须放在dispatch之后，这样能保证Redux的状态已经更新完成，组件如果依赖这个状态的话，此时已经能拿到最新值，再执行回调逻辑就不会有问题
• 健壮性处理：加typeof callback === 'function'的判断，防止组件没传回调时出现callback is not a function的错误
• 错误回调：加上catch块，请求失败时也调用回调并传入错误信息，组件里可以根据这个做错误提示或者重试操作

组件里的调用示例： #

你在组件里调用这个action creator的时候，就可以这样传回调：

// 假设是类组件，已经用connect把fetchUsers映射到props里
this.props.fetchUsers(true, (data, error) => {
  if (error) {
    console.error('获取用户列表失败:', error);
    // 比如显示错误弹窗
  } else {
    console.log('用户列表获取成功:', data);
    // 比如滚动到页面顶部、显示成功提示，或者执行其他组件逻辑
  }
});

内容的提问来源于stack exchange，提问作者Nims