如何从 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的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Redux-toolkit 中使用两个不同的切片?

如何在 Storybook 中使用 redux-toolkit?

如何实现redux-toolkit和next,js又不丢s-s-r

从 Redux-Toolkit 存储中获取返回 undefined

从 react-redux 迁移到 redux-toolkit 后使用 configureStore 传递初始状态的最佳方法

使用 Redux Toolkit 异步 REST API 模式时如何捕获 HTTP 4xx 错误?