Как выполнить 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
}
}