How to fix “Uncaught TypeError: callback is not a function” thrown by redux/redux thunk?

Question

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')
   });
 };

Answer 1

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

Answer 2

In function name getlocationSuccess , the letter L is small. However, it is capital while making call.

Answer 3

getLocationSuccess doesn't appear to be defined anywhere. By the looks of it, if you want to use the callback provided to getLocation you need to call dispatch like this dispatch(cb(data)); or change the name of the argument for getLocation to getLocationSuccess:

export const getLoaction = (getLocationSuccess: 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
      };

      dispatch(getLocationSuccess(data));   
    })
    .catch((err: any) => {
      console.log('NAVIGATOR FAILED: ', err)
    })
  }
}