解析redux中的API调用

Question

我试图发送分析数据到谷歌，需要做一个API。我有一个搜索框，可以过滤客户列表。搜索本身每300ms进行一次，但我只想每1000ms将搜索数据发送给GA。

我正在尝试使用redux- debdebxed中间件。但我注意到这只会延迟状态的更新。我正试着用精简的方式来使用它。我看到一个已经有人问过的问题。我试了已经写在那里的东西，但它不起作用。

这是我的坦克和中间件的样子

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;

然后导入并包含这个中间件，就像- so:

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

然后你可以尽可能多地调度USER_UPDATED_SEARCH_FIELD动作，因为它们最多每秒钟才会被发送到GA。

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

希望这就是你想要的。如果没有，请澄清，我会尽我所能提供帮助。否则，祝你好运!