去抖多个调度动作

Question

我有一个自动完成组件，需要来自两个独立 API 的结果。这两个 API 都需要与一个去抖周期一起调用，因为它是自动完成的。我正在使用 react-redux 和 redux-api。这是我到目前为止所拥有的。请看我return的Search方法。问题只是其中一个调用发生。

在我的AutoCompleteContainer.js

const mapDispatchToProps = dispatch => {
  const debounceDispatch = debounce(dispatch, 500);
  return {
    search(term) {
      return Promise.all([
        // Fix me! Only one of the calls below happens. 
        debounceDispatch(rest.actions.suggestions({ q: term })),
        debounceDispatch(rest.actions.concepts({ corpus: 'desc', term: [term] }))
      ]);
    },
    async reset() {
      await dispatch(rest.actions.suggestions.reset());
      await dispatch(rest.actions.concepts.reset());
    }
  };
};

我应该在组件级别去抖动吗？或者这可以在这里完成吗？

Answer 1

您需要有一个函数来分派这两个动作，然后用 debounce.

修饰该函数

所以像这样：

const handleAutocomplete = () => {
  dispatch(rest.actions.suggestions({ q: term })),
  dispatch(rest.actions.concepts({ corpus: 'desc', term: [term] }))
}

const debounceHandleAutocomplete = debounce(handleAutocomplete,500)

去抖多个调度动作

Debounce multiple dispatch actions

reactjs

redux

react-redux

redux-api-middleware