Как выполнить ajax-поиск и одновременно обновить ввод с помощью redux

Я новичок в Redux и строю новый компонент для поиска в Redux. При каждом изменении ввода должен запускаться новый ajax-запрос к серверу, если число символов во входных данных превышает 3. Входное значение должно быть очищаемым после нажатия кнопки закрытия. Я обновляю входное значение с помощью приставки. Может ли кто-нибудь из вас помочь мне выяснить, куда поместить вызов ajax, чтобы ввод был обновлен?

Мой компонент выглядит так

Код для компонента:

    import React,{Component} from 'react';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import { inputOnChange,inputOnFocus,inputOnBlur,closeBtnClick} from '../actions'
    const SearchBar = ({terms,others,inputOnChange,inputOnFocus,closeBtnClick,inputOnBlur}) => (
     <div className="input-group mb3">
        <input type="text"
        onFocus={()=>inputOnFocus()}
        onBlur={()=>inputOnBlur()}
        onChange={(event)=>inputOnChange(event)}
        value={terms.terms}
        className="form-control" placeholder="Search"
        aria-label="Search" aria-describedby="basic-addon1"/>
      <div className={ others.visible || terms.terms !='' ? "input-group-append" : "input-group-append hidden"}>
          <button onClick={()=>closeBtnClick()} className="btn" type="button"><img src={closebtn} width="20"/></button>
        </div>
      </div>
    )
    function mapStateToProps(state){
      return { terms:state.terms, others:state.others };
    }
    function mapDispatchToProps(dispatch){
      return bindActionCreators({
        inputOnChange:inputOnChange,
        inputOnFocus:inputOnFocus,
        inputOnBlur:inputOnBlur,
        closeBtnClick:closeBtnClick
      },dispatch)
    }
    export default connect(mapStateToProps,mapDispatchToProps)(SearchBar);

код для создателей действий

    import axios from 'axios';
    export const inputOnChange =(event)=>{
      return{
        type:'INPUT_CHANGE',
        payload:event.target.value
      }
    }

0 ответов

Другие вопросы по тегам