我有一个自动完成组件,需要两个独立API的结果。自从自动完成以来,两个API都需要与去抖动期间一起调用。我正在使用react-redux和redux-api。这就是我到目前为止所拥有的。请参阅我返回的搜索方法。问题只是其中一个呼叫发生。
在我的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());
}
};
};
我应该在组件级别进行去抖动吗?或者这可以在这里完成吗?
答案 0 :(得分:1)
你需要有一个调度这两个动作的函数,然后用debounce
修饰该函数。
这样的事情:
const handleAutocomplete = () => {
dispatch(rest.actions.suggestions({ q: term })),
dispatch(rest.actions.concepts({ corpus: 'desc', term: [term] }))
}
const debounceHandleAutocomplete = debounce(handleAutocomplete,500)