title: How to make antd autocomplete update dropdown with server data each time input changes
body: <p>I have some project that uses antd, redux, saga, 
  In particular I use antd autocomplete <code>https://ant.design/components/auto-complete/</code></p>
  
  <p>I am trying to make antd autocomplete work with server data and send redux action each time when user types something in input. The problem is I dont know how to make it work with redux saga.</p>
  
  <p>Supposedly I get data from server succesfully and I update store with that data. So how to show this data in dropdown. Dropdown data should probably change each time user types</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 (
      &lt;span&gt;{title}&lt;/span&gt;
    );
  }
  
  const options = dataSource.map(group =&gt; (
      &lt;OptGroup key={group.directionId} label={renderTitle(group.directionName)}&gt;
        {group.items.map(opt =&gt; (
          &lt;Option key={opt.docflowTypeName} value={opt.docflowTypeName}&gt;
            {opt.docflowTypeName}
            &lt;span className="certain-search-item-count"&gt; {opt.count} организаций&lt;/span&gt;
          &lt;/Option&gt;
        ))}
      &lt;/OptGroup&gt;
  ));
  
  
  const fetchSuggest = createAction('FETCH_SUGGEST_REQUEST', payload =&gt; payload);
  const fetchSuggestSuccess = createAction('FETCH_SUGGEST_SUCCESS', result =&gt; result);
  const fetchSuggestError = createAction('FETCH_SUGGEST_ERROR');
  
  const autoSuggesting = handleActions(
   {
    [fetchSuggest]: (state, action) =&gt; ({
      ...state,
      isLoading: true,
    }),
    [fetchSuggestSuccess]: (state, action) =&gt; { 
     console.log("fetchSuggestSuccess", action);
    return {
      ...state,
      isLoading: false,
      list: action.payload,
    }},
    [fetchSuggestError]: (state, action) =&gt; ({
      ...state,
      isLoading: false,
    })
   },
   initialState
  );
  
  const fetchList = async payload =&gt; {
   var {filter, exclusion} = payload || {};
     const response = await axios.get(`http://someserver.com?filter=${filter}&amp;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 =&gt; {
    this.setState({
      dataSource: !searchText ? [] : this.getListToDisplay(),
    });
   }
   
   handleChange = value =&gt; {
    this.setState({ value });
    this.props.fetchSuggest({filter:value, exclusion: false});
      }
   
   getListToDisplay = () =&gt; {
    return this.props.list.map(group =&gt; (
     &lt;OptGroup key={group.directionId} label={renderTitle(group.directionName)}&gt;
       {group.items.map(opt =&gt; (
      &lt;Option key={opt.docflowTypeName} value={opt.docflowTypeName}&gt;
        {opt.docflowTypeName}
        &lt;span className="certain-search-item-count"&gt; {opt.count} организаций&lt;/span&gt;
      &lt;/Option&gt;
       ))}
     &lt;/OptGroup&gt;
    ))
   }
   
   render() {
    return (
     &lt;React.Fragment&gt;
     &lt;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
     &gt;
     &lt;/AutoComplete&gt;
     &lt;/React.Fragment&gt;
    );
   }
  }
  
  const mapStateToProps = state =&gt; state;
  const mapDispatchToProps = dispatch =&gt; ({ fetchSuggest: (data) =&gt; dispatch(fetchSuggest(data)) });
  const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
  
  ReactDOM.render(&lt;Provider store={store}&gt;&lt;ConnectedApp/&gt;&lt;/Provider&gt;, document.getElementById('root'));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="root"&gt;&lt;/div&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.0.3/react-redux.js" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://unpkg.com/redux@latest/dist/redux.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/redux-actions@latest/dist/redux-actions.js"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/redux-saga/1.0.2/redux-saga.umd.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
   &lt;script src="https://unpkg.com/moment/min/moment-with-locales.js"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/antd/dist/antd-with-locales.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" /&gt;</code></pre>
  </div>
  </div>
  </p>