如何从 Redux Toolkit 中去抖 createAsyncThunk
Posted
技术标签:
【中文标题】如何从 Redux Toolkit 中去抖 createAsyncThunk【英文标题】:How to debounce createAsyncThunk from Redux Toolkit 【发布时间】:2021-09-17 18:00:39 【问题描述】:我正在从 Redux 迁移到 Redux Toolkit。我这里的简化代码用于使用 lodash/debounce 进行去抖动更新。
import debounce from "lodash/debounce";
const updateApplication = async (app, dispatch) =>
const state = getState();
try
const result = await update(app);
dispatch(
type: UPDATE,
result: result
);
catch (err)
console.log(err);
;
export default debounce(updateThunk, 2000);
问题是当我转到 createAsyncThunk 时,它没有被执行。
const updateApp = createAction("app/update");
const updateApplication = createAsyncThunk(
"app/updateDebounced",
async (app, dispatch ) =>
try
const result = await update(app);
dispatch(updateApp(result))
);
catch (err)
// console.log(err);
);
export default debounce(updateApplication, 2000)
如何让它发挥作用?
【问题讨论】:
【参考方案1】:const updateApp = createAction("app/update");
const handler = async (app, dispatch ) =>
try
const result = await update(app);
dispatch(updateApp(result))
);
catch (err)
// console.log(err);
const debouncedHandler = debounce(handler, 2000);
export default createAsyncThunk(
"app/updateDebounced",
debouncedHandler
);
【讨论】:
以上是关于如何从 Redux Toolkit 中去抖 createAsyncThunk的主要内容,如果未能解决你的问题,请参考以下文章
如何在 Storybook 中使用 redux-toolkit?
如何实现redux-toolkit和next,js又不丢s-s-r
从 Redux-Toolkit 存储中获取返回 undefined
从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法