react debounce input dispatch code example
Example 1: redux dispatch input onchange
const SearchBar = ({ searchQuery }) =>
<Card>
<div className={styles.searchFieldContainer}>
<div className={styles.field}>
<input type="text" onChange={(event)=> searchQuery(event.target.value)} placeholder="Search for items or sellers" />
</div>
<Button className={styles.searchButton}>
Search
</Button>
</div>
</Card>
const mapStateToProps = () => {
return {
}
}
const mapDispatchToProps = (dispatch) => {
return {
searchQuery: (val) => dispatch(searchQuery(val))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);
Example 2: how to add debounce in react redux js
function SearchInput() {
const [realTimeValue, setRealTimeValue] = useState('');
const debouncedValue = useDebouncedValue(realTimeValue, 500);
useEffect(() => {
api.fetchSearchResults(debouncedValue);
}, [debouncedValue])
return <input onChange={event => setRealTimeValue(event.target.value)} />
}