reactjs - React Bootstrap Typeahead AsyncTypehead 与 Redux 的同步问题

Question

我正在使用 在我的 react/redux 应用程序中开发用户搜索功能react-bootstrap-typehead :http://ericgio.github.io/react-bootstrap-typeahead/

用户搜索调用一个API来搜索用户列表，所以我使用的是 AsyncTypeahead 成分。

由于我使用的是 Redux，我将加载和搜索结果存储在商店中，因此我的代码如下所示:

const { searchPeople, loading, searchResults, selectedPerson } = this.props;
          <AsyncTypeahead
            isLoading={loading}
            options={searchResults}
            labelKey="DisplayName"
            clearButton
            minLength={5}
            onSearch={searchPeople}
            onChange={handleChange}
            placeholder="Search for a user..."
            renderMenuItemChildren={option => (
              <TypeaheadItem key={option.EmployeeID} item={option} {...this.props} />
            )}
          />

onSearch={searchPeople}在 Redux 中调用一个 Action 来调用 API 并将结果存储在“searchResults”中:

const searchPeople = term => async dispatch => {
  dispatch({
    type: REQUEST_SENT
  });

  const results = await dispatch(applicationActions.peopleSearch(term));

  dispatch({
    type: REQUEST_RECEIVED,
    data: results
  });
};

我的“peopleSearch”功能存储在另一个操作中，我拥有我们所有的用户搜索功能。这就是为什么我要分派(dispatch)到另一个行动。

const peopleSearch = searchTerm => async () => {
  const url = `https://api-personSearch.test.com/search=${searchTerm}&Output=JSONP`;
  const response = await fetchJsonp(url);
  const data = await response.json();
  return data.slice(0, 10);
};

如果我搜索用户打字速度慢，一切都会完美运行。问题是，如果我快速或以正常速度键入用户名，则会在调用任何“REQUEST_RECEIVED”之前调用多个“REQUEST_SENT”调度。因此，查看 Redux Dev Tools 显示的结果如下所示:

REQUEST_SENT
REQUEST_SENT
REQUEST_SENT
REQUEST_RECEIVED
REQUEST_RECEIVED
REQUEST_RECEIVED

最终发送到界面的内容并不是用户最终输入的最后一个字母的结果。

在 Redux 中使用 AsyncTypeahead 以便结果以正确的发送顺序返回的正确方法是什么？

不是很好的解决方案

最终起作用的一件事(即使我认为它有点像黑客)是向 AsyncTypehead 添加“延迟”。添加 delay={1000}对 AsyncTypeahead 组件的 prop 为 api 提供了足够的时间来完成它的调用，然后再调用 api。

如果可能的话，我想找到更好的解决方案。

Answer 1

我在使用中遇到了不同的问题，但我可以建议解决排序问题。

将最后一个查询字符串存储在 Redux 中。

当请求完成时，如果它不是针对最后一个查询字符串，则忽略它。

理想情况下，您应该在 onSearch() 中收到新请求时取消之前的请求。 ，但这将具有相同的效果。如果用户继续打字，延迟足够长 onSearch()要触发但足够快以导致重叠请求，只有最后一个请求会显示结果。