Question

我正在尝试将分析数据发送到谷歌并需要制作API。我有一个搜索框，可以过滤客户列表。搜索本身每300毫秒去抖动一次，但我只想每隔1000毫秒将搜索数据发送给GA。

我正在尝试使用redux-debounced中间件。但我注意到它只会有助于延迟国家的更新。我试图将它与redux-thunk一起使用。 I saw an issue where someone already asked。我尝试过已经写过的内容，但它没有用。

这就是我的thunk和middle wares的样子

let store = createStore(
  reducers,
  applyMiddleware(logger, createDebounce(), thunkMiddleware)
);

export function trackCustomerSearch(key) {
  const thunk = dispatch => {
    console.log(key); //This should be only logged only once for 1000ms
    ... //make api call to GA
  };

  thunk.meta = {
    debounce: {
      time: 1000
    }
  };

  return thunk;
}

我错过了什么吗？或者有替代方法吗？

Answer 1

编写自己的中间件的时间。这不是很难，你可以让它完全按照自己的意愿行事。

const debounceInterval = 1000;
let timerRef = null;

const updateGAMiddleware = store => next => action => {
  if (action.type === 'USER_UPDATED_SEARCH_FIELD') {
    // if my timeout hasn't passed, exit early
    if (timerRef) return next(action);

    // send update to GA here
    // (presumably search field value is in action.data)

    timerRef = setTimeout(() => { timerRef = null; }, debounceInterval); 
  }
  return next(action);
};

export default updateGAMiddleware;

然后你只需导入并包含这样的中间件，如下所示：

...
import updateGAMiddleware from './<somewhere_sane>';
let store = createStore(
  reducers,
  applyMiddleware(logger, updateGAMiddleware, thunkMiddleware)
);

然后您可以根据需要发送USER_UPDATED_SEARCH_FIELD个动作，因为它们最多只会每秒发送给GA。

我不知道你是否还需要其他去抖的中间件。如果您只关心发布到GA的频率，而不关心更新状态树的频率，那么也许您不会。

希望这就是你想要的。如果没有，请澄清，我会尽力帮助。祝你好运！

在redux中调用Debounce API

1 个答案: