Adding redux to react native app stop functioning, no error thrown - reactjs

Question

I'am testing the google maps autocomplete API in my react native app. I have a simple text input field which accepts a search term and based on that the app fetches data from the mentioned api. I have used redux to update the status of the locations in the app.
But after adding redux I can't type anything in the text input, It was working fine earlier. I don't see any error, so I'm helpless on how to resolve. I have attached the relevant codes. Helps would be appreciated.
App.js
const store = createStore(reducers, compose(applyMiddleware(thunk)));
const App = () => {
return (
<Provider store={store}>
<StatusBar barStyle="dark-content"/>
<SearchScreen/>
</Provider>
);
};
export default App;
Reducers.js
export default combineReducers({
locations
});
export default (locations = [], action) => {
switch (action.type) {
case actionTypes.FETCH_LOCATIONS:
return action.payload;
default:
return locations;
}
}
SearchScreen.js
const SearchScreen = () => {
const [from, setFrom] = useState("");
const dispatch = useDispatch();
const handleFrom = (str) => {
setFrom(str);
if (from.length >= 5)
dispatch(getLocations(from))
}
return (
<SafeAreaView>
<View style={styles.container}>
<TextInput
style={styles.textInput}
placeholder="from"
value={from}
onChangeText={(str) => handleFrom(str)}/>
<Text>{from}</Text>
</View>
</SafeAreaView>
)
};
export default SearchScreen;
getLocations
export const getLocations = (searchTerm) => async (dispatch) => {
try {
const {response} = await api.fetchLocations(searchTerm);
console.log(`response: ${JSON.stringify(response)}`);
// dispatch({type: actionTypes.FETCH_LOCATIONS, payload: response?.predictions});
} catch (e) {
console.error(e);
}
}
apis
const API = axios.create({
baseURL: 'https://google-maps-autocomplete-plus.p.rapidapi.com/autocomplete'
});
API.interceptors.request.use((req) => {
req.headers = {
'X-RapidAPI-Key': 'API-KEY',
'X-RapidAPI-Host': 'google-maps-autocomplete-plus.p.rapidapi.com'
};
return req;
});
export const fetchLocations = (query) => API.get(`?query=${query}&limit=5`);

Answer 1

async function always returns a Promise. So wait until it has a value before passing it to disptach.
export const getLocations = (searchTerm) => async {
try {
const { data } = await api.fetchLocations(searchTerm);
console.log(`response: ${JSON.stringify(data)}`);
return data;
} catch (e) {
console.error(e);
return [];
}
}
const handleFrom = (str) => {
setFrom(str);
if (str.length >= 5)
getLocations(str).then(data => dispatch(data, {});
}