Api call not firing up in redux action with debouce - reactjs

Question

Im trying to implement debouncing with my own pure js function for calling the action in action file with axios POST request.
The below code in the input box component
import React, { useState, useCallback } from 'react'
import { searchDrug } from '../../actions/drug-interaction'
function CustomInputSearch(props) {
const { handleSelectInput } = props
const apiCall = (value) => {
searchDrug(value)
}
const debounce = (apiFunc, delay) => {
let inDebounce
return function () {
const context = this
const args = arguments
clearTimeout(inDebounce)
inDebounce = setTimeout(() => apiFunc.apply(context, args), delay)
}
}
const optimizedVersion = debounce(apiCall, 500)
const handleChange = (e) => {
optimizedVersion(e.target.value)
}
return (
<div>
<input
className='form-control'
placeholder='Search Drug...'
onKeyUp={handleChange}
/>
</div>
)
}
export default CustomInputSearch
Ignore the unnececssary imports.
The below code is the action file.
export const searchDrug = (drug) => {
const params = {
"start": drug,
"limit": 100
}
let axiosConfig = {
headers: {
// 'Access-Control-Allow-Origin': '*'
}
}
return (dispatch) => {
dispatch({ type: 'DRUG_LIST_NOTIFY', payload: { drugListLoading: true } })
axios.post(`${API_URL}/drug/autocomplete`, params, axiosConfig)
.then((response) => {
dispatch({
type: 'DRUG_LIST',
payload: { response: response.data, drugListLoading: false }
})
})
.catch((error) => {
dispatch({ type: 'DRUG_LIST_NOTIFY', payload: { drugListLoading: false } })
if (error.response && error.response.status === 401) {
window.open('/?src=auth-error', '_self')
}
});
};
}
But im not seeing any request going in network tab in browser.Im also composedWithDevtools in redux store.Thanks in advance

Answer 1

It is because your searchDrug action must be came from dispatch instead of calling it directly.
import React, { useState, useCallback } from 'react'
import { useDispatch } from 'react-redux'
import { searchDrug } from '../../actions/drug-interaction'
function CustomInputSearch(props) {
const { handleSelectInput } = props
const dispatch = useDispatch()
const apiCall = (value) => {
dispatch(searchDrug(value))
}
...