React Bootstrap Typeahead AsyncTypehead синхронная проблема с Redux - PullRequest
Новая
       27

React Bootstrap Typeahead AsyncTypehead синхронная проблема с Redux

2 голосов
/ 05 июня 2019

Я разрабатываю функцию поиска пользователей в моем приложении «Реакция / редукция», используя тип реакции-начальной загрузки : 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 для вызова 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" хранится в другом действии, где у меня есть все функции поиска пользователей. Вот почему я отправляюсь на другое действие. 

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_SENT» отправляются перед вызовом «REQUEST_RECEIVED». Поэтому, глядя на Redux Dev Tools, вы видите результаты, которые выглядят так: 

REQUEST_SENT
REQUEST_SENT
REQUEST_SENT
REQUEST_RECEIVED
REQUEST_RECEIVED
REQUEST_RECEIVED

То, что в итоге отправляется на интерфейс, не является результатом последнего письма, набранного пользователем.

Как правильно использовать AsyncTypeahead с Redux, чтобы результаты возвращались в том порядке, в котором они были отправлены?

Не большое решение

Одна вещь, которая в итоге сработала (хотя я думаю, что это своего рода хак) - это добавление «задержки» к AsyncTypehead. Добавление delay={1000} prop в компонент AsyncTypeahead дает API достаточно времени для завершения вызова до того, как будет выполнен другой вызов API.

Я бы хотел найти лучшее решение, если оно возможно.

1 Ответ

0 голосов
/ 02 июля 2019

У меня другая проблема при использовании, но я могу предложить решение проблемы заказа.

  1. Сохранить последнюю строку запроса в Redux.
  2. Когдазапрос завершается, игнорируйте его, если он не относится к последней строке запроса.

В идеале вы должны отменить предыдущий запрос при получении нового в onSearch(), но он будет иметь тот жеэффект.Если пользователь продолжает печатать, задерживая достаточно долго для запуска onSearch(), но достаточно быстро, чтобы вызвать наложение запросов, только последний запрос будет отображать результаты.

...