Redux Thunk结合debounce实现搜索联想输入问题求助

我看到你在尝试给搜索联想的API请求加300ms防抖，但当前的写法存在一个关键问题：每次调用fetchMoviesThunk时，都会重新创建一个全新的_.debounce包装函数，这就导致防抖逻辑完全失效——每一次按键触发的都是独立的防抖实例，它们之间不会共享延迟计时，所以还是会每次按键都发起请求。

下面是两种可行的修正方案：

方案一：提取防抖函数到Thunk外部（推荐） #

把防抖逻辑提到thunk函数之外，确保整个应用生命周期内只有一个防抖实例，这样连续的搜索请求才会被正确合并：

// 把防抖函数提取到外部，确保全局只有一个实例
const fetchMoviesDebounced = _.debounce((dispatch, movie) => {
  axios.get(`${ROOT_URL}${API_KEY}&s=${movie}`)
    .then((data) => dispatch(fetchMoviesSuccess(data)))
}, 300);

export function fetchMoviesThunk(movie) {
  return dispatch => {
    dispatch(requestFetchMovies());
    // 复用同一个防抖函数实例
    fetchMoviesDebounced(dispatch, movie);
  }
}

为什么这样有效？ #

不管用户触发多少次搜索（按键操作），调用的都是同一个fetchMoviesDebounced函数，Lodash的防抖逻辑会正确记录延迟计时，300ms内的连续调用会被合并，只执行最后一次的API请求。

方案二：额外优化：取消旧请求避免结果覆盖 #

如果你的API响应速度不稳定，可能会出现旧请求的结果晚于新请求返回，导致搜索结果显示错误的情况。可以结合Axios的CancelToken来取消未完成的旧请求：

// 用于存储当前请求的取消令牌
let activeCancelToken;

const fetchMoviesDebounced = _.debounce((dispatch, movie) => {
  // 取消之前未完成的请求
  if (activeCancelToken) {
    activeCancelToken.cancel('新搜索触发，取消旧请求');
  }
  
  // 创建新的取消令牌
  activeCancelToken = axios.CancelToken.source();

  axios.get(`${ROOT_URL}${API_KEY}&s=${movie}`, {
    cancelToken: activeCancelToken.token
  })
    .then((data) => dispatch(fetchMoviesSuccess(data)))
    .catch((error) => {
      // 忽略主动取消的请求错误
      if (!axios.isCancel(error)) {
        // 可以在这里添加错误处理的dispatch
        // dispatch(fetchMoviesFailure(error));
      }
    });
}, 300);

export function fetchMoviesThunk(movie) {
  return dispatch => {
    dispatch(requestFetchMovies());
    fetchMoviesDebounced(dispatch, movie);
  }
}

这个优化能确保用户看到的永远是最新的搜索结果，不会被慢响应的旧请求干扰。

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