I'm making asynchronous calls in my redux actions and when I dispatch a successful call, the following error is returned in dev tools:
Uncaught TypeError: callback is not a function
When I comment out the dispatch invocation the app hangs of course, but I do not receive the error above. So that tells me something perhaps has to be flawed with my redux action.
Then additional lines in the error point to lines in the react-native npm package. I'm currently running on react-native 0.59.6
. Perhaps the version i'm running on has a play here.
location.tsx
const getLocationSuccess = (data: any) => {
return {
type: GET_GEOLOCATION_SUCCESS,
data
}
}
export const getLocation = (cb: Function) => {
return (dispatch: Function, getState: Function) => {
const { locationState } = getState();
const { latitude, longitude } = locationState.region;
axios.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${latitude},${longitude}&key=<API KEY>`)
.then(json => {
const address = json.data.results[0].formatted_address;
const data = {
loading: false,
currentLocation: address
};
// THIS LINE IS CAUSING THE ERROR
dispatch(getLocationSuccess(data));
cb(true)
})
.catch((err: any) => {
console.log('NAVIGATOR FAILED: ', err)
})
}
}
index.tsx
componentDidMount(){
this.props.actions.getLocation(() => {
console.log('LOCATION SUCCESS')
});
};
I solved the issue. The problem wasn't in any of the redux files. It was a version issue with React. I wasn't running on the latest version of React and as a result, React did not explicitly install the correct version of a "scheduler package 0.14.0" (which is what the error message points to).
The fix, you can either install the correct scheduler package, or you can upgrade to the latest version of React.
They mention it in this issue regarding hooks: https://github.com/facebook/react/issues/15647