Как сделать так, чтобы автоматическое завершение обновления antd с данными сервера происходило при каждом изменении ввода

Question

У меня есть проект, который использует antd, redux, saga. В частности, я использую antd autocomplete https://ant.design/components/auto-complete/

Я пытаюсь заставить antd autocomplete работать с данными сервера и отправлять избыточное действие каждый раз, когда пользователь вводитчто-то на входе. Проблема в том, что я не знаю, как заставить его работать с сагой redux.

Возможно, я успешно получаю данные с сервера и обновляю хранилище этими данными. Так как показать эти данные в выпадающем списке. Данные раскрывающегося списка, вероятно, должны меняться каждый раз, когда пользователь вводит

const {createStore, applyMiddleware} = Redux;
const {Provider, connect} = ReactRedux;
const { createAction, handleActions } = window.ReduxActions;
const createSagaMiddleware = ReduxSaga.default;
const {takeEvery, takeLatest, put, call} = ReduxSaga.effects;
const { AutoComplete } = antd;
const { Option, OptGroup } = AutoComplete;




const initialState = {
	isLoading: false,
	list: [],
};


var dataSource = [
  {
    "directionId": "3e8a6a23-d325-4c74-9bb5-e83c0bd4de4e",
    "directionName": "ABC",
    "items": [
      {
        "docflowType": 71,
        "docflowTypeName": "infoABC",
        "startDate": "2019-10-07T09:47:32.119004",
        "endDate": "2019-10-07T09:47:32.119004",
        "count": 1
      }
    ]
  },
  {
    "directionId": "7feb83e0-4d7b-4d99-8adb-23c25473d57d",
    "directionName": "TGK",
    "items": [
      {
        "docflowType": 74,
        "docflowTypeName": "reportG",
        "startDate": "2019-10-07T09:42:08.549327",
        "endDate": "2019-10-07T09:42:08.549327",
        "count": 1
      }
    ]
  }
]


function renderTitle(title) {
  return (
    <span>{title}</span>
  );
}

const options = dataSource.map(group => (
    <OptGroup key={group.directionId} label={renderTitle(group.directionName)}>
      {group.items.map(opt => (
        <Option key={opt.docflowTypeName} value={opt.docflowTypeName}>
          {opt.docflowTypeName}
          <span className="certain-search-item-count"> {opt.count} организаций</span>
        </Option>
      ))}
    </OptGroup>
));


const fetchSuggest = createAction('FETCH_SUGGEST_REQUEST', payload => payload);
const fetchSuggestSuccess = createAction('FETCH_SUGGEST_SUCCESS', result => result);
const fetchSuggestError = createAction('FETCH_SUGGEST_ERROR');

const autoSuggesting = handleActions(
	{
		[fetchSuggest]: (state, action) => ({
		  ...state,
		  isLoading: true,
		}),
		[fetchSuggestSuccess]: (state, action) => { 
			console.log("fetchSuggestSuccess", action);
		return {
		  ...state,
		  isLoading: false,
		  list: action.payload,
		}},
		[fetchSuggestError]: (state, action) => ({
		  ...state,
		  isLoading: false,
		})
	},
	initialState
);

const fetchList = async payload => {
	var {filter, exclusion} = payload || {};
  	const response = await axios.get(`http://someserver.com?filter=${filter}&exceptTestCodes=${exclusion}`);
	return response.data;
};

function* fetchSuggestion(action) {
console.log("worker saga получает", action.payload)
  try {
    const data = action.payload;
    const response = yield call(fetchList, data);
	console.log(response);
    // yield delay(200);
    yield put(fetchSuggestSuccess(response));
  } catch (error) {
    yield put(fetchSuggestError());
  }
}


function* watchInput() {
	yield takeLatest('FETCH_SUGGEST_REQUEST', fetchSuggestion);
}

const sagaMiddleware = createSagaMiddleware();
const store = createStore(autoSuggesting, initialState, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(watchInput);

class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = { value: '', dataSource:[] };
	}
	
	handleSearch = searchText => {
		this.setState({
		  dataSource: !searchText ? [] : this.getListToDisplay(),
		});
	}
	
	handleChange = value => {
		this.setState({ value });
		this.props.fetchSuggest({filter:value, exclusion: false});
    }
	
	getListToDisplay = () => {
		return this.props.list.map(group => (
			<OptGroup key={group.directionId} label={renderTitle(group.directionName)}>
			  {group.items.map(opt => (
				<Option key={opt.docflowTypeName} value={opt.docflowTypeName}>
				  {opt.docflowTypeName}
				  <span className="certain-search-item-count"> {opt.count} организаций</span>
				</Option>
			  ))}
			</OptGroup>
		))
	}
	
	render() {
		return (
			<React.Fragment>
			<AutoComplete
				value={this.state.value}
				onChange={this.handleChange}
				onSearch={this.handleSearch}
				onSearch={this.handleSearch}
				dataSource={this.getListToDisplay()}
				optionLabelProp="value"
				dropdownMatchSelectWidth={false}
				dropdownStyle={{ width: 405 }}
				style={{ width: '30%', overflow: 'hidden' }}
				// filterOption
			>
			</AutoComplete>
			</React.Fragment>
		);
	}
}

const mapStateToProps = state => state;
const mapDispatchToProps = dispatch => ({ fetchSuggest: (data) => dispatch(fetchSuggest(data)) });
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);

ReactDOM.render(<Provider store={store}><ConnectedApp/></Provider>, document.getElementById('root'));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.0.3/react-redux.js" crossorigin="anonymous"></script>
	<script src="https://unpkg.com/redux@latest/dist/redux.js"></script>
    <script src="https://unpkg.com/redux-actions@latest/dist/redux-actions.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.0.2/redux-saga.umd.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
    <script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />