Redux Toolkit中用Lodash debounce导致payload为undefined的问题

直接用lodash.debounce包裹createAsyncThunk的异步回调函数是错误的，核心问题在于：

• debounce返回的防抖函数不会传递原异步函数的Promise结果给createAsyncThunk
• createAsyncThunk要求回调函数返回Promise来追踪异步状态，而防抖后的函数默认返回undefined，最终导致fulfilled状态时payload为空

方案1：在调用dispatch时做防抖（推荐） #

把防抖逻辑放在组件/调用层，而非thunk内部，符合关注点分离原则：

1. 保留原thunk定义（不做防抖）：

export const getProfile = createAsyncThunk(
  GET_PROFILE,
  async (amount: any, { rejectWithValue }: any) => {
    try {
      const response = await API.Get(EndPoint.GET_PROFILE)
      console.log(response)
      return response.data
    } catch (error: any) {
      amount.failCallBack(error?.response?.data?.msg || 'something_went_wrong')
      return rejectWithValue(error?.code || 'Something went wrong..!')
    }
  }
)

2. 在组件中创建防抖后的dispatch函数：

import { debounce } from 'lodash';
import { useDispatch } from 'react-redux';
import { getProfile } from './your-thunk-file';

function YourComponent() {
  const dispatch = useDispatch();
  
  // 创建防抖函数，延迟5000ms执行
  const debouncedGetProfile = debounce((params) => {
    dispatch(getProfile(params));
  }, 5000);

  // 组件卸载时清除防抖定时器，避免内存泄漏
  useEffect(() => {
    return () => debouncedGetProfile.cancel();
  }, [debouncedGetProfile]);

  // 使用防抖后的函数代替直接dispatch
  const handleTrigger = (params) => {
    debouncedGetProfile(params);
  };

  return <button onClick={() => handleTrigger({ data: 'login' })}>获取资料</button>;
}

方案2：封装支持Promise的异步防抖函数（thunk层处理） #

如果必须在thunk内部实现防抖，需要自己封装一个能传递Promise结果的防抖工具函数：

import { createAsyncThunk } from '@reduxjs/toolkit';

// 封装支持异步函数的防抖工具
function debounceAsync<T extends (...args: any[]) => Promise<any>>(func: T, wait: number) {
  let timeoutId: NodeJS.Timeout | null = null;
  let pendingPromise: Promise<ReturnType<T>> | null = null;

  return (...args: Parameters<T>): Promise<ReturnType<T>> => {
    if (timeoutId) clearTimeout(timeoutId);

    pendingPromise = new Promise((resolve, reject) => {
      timeoutId = setTimeout(async () => {
        try {
          const result = await func(...args);
          resolve(result);
        } catch (err) {
          reject(err);
        }
      }, wait);
    });

    return pendingPromise;
  };
}

// 使用自定义的debounceAsync包裹thunk回调
export const getProfile = createAsyncThunk(
  GET_PROFILE,
  debounceAsync(async (amount: any, { rejectWithValue }: any) => {
    try {
      const response = await API.Get(EndPoint.GET_PROFILE)
      console.log(response)
      return response.data
    } catch (error: any) {
      amount.failCallBack(error?.response?.data?.msg || 'something_went_wrong')
      return rejectWithValue(error?.code || 'Something went wrong..!')
    }
  }, 5000)
)

• 方案1更推荐：防抖属于用户交互的控制逻辑，放在UI层处理更清晰，同时避免在thunk中引入额外的定时器状态管理
• 使用lodash的debounce时，记得调用cancel()方法清理定时器，防止组件卸载后仍执行异步操作导致内存泄漏

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