Debounce in redux-tool-kit

Question

我正在尝试使用lodash debounce

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..!')
}
}
)

上面的函数工作没有任何错误，并且可以在

操作的fullfill中看到数据。所以我试着像下面这样实现debounce

export const getProfile = createAsyncThunk(
GET_PROFILE,
debounce(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)
)

现在在web应用程序中没有任何异常，当我控制台记录它显示的fullfill动作时有效载荷未定义

{
"type": "login/getProfile/fulfilled",
"meta": {
"arg": {
"data": "login"
},
payload: undefined,
"requestId": "8pfalpIzFl8nNOgi2jRcb",
"requestStatus": "fulfilled"
}
}

有什么建议吗?

thanks in advance

Answer 1

不要揭穿有效负载创建器，而要揭穿调度动作。因为你可能不希望在你的组件中这样做，所以可以在手动操作

中执行。

const getProfile = createAsyncThunk( ... normal definition ... );
const debounced = debounce((arg, dispatch) => dispatch(getProfile(arg)), 5000);
const debouncedGetProfile = (arg) => (dispatch) => debounced(arg, dispatch)

，然后使用

dispatch(debouncedGetProfile(amount))