Redux action creator getting "TypeError: dispatch(...) is not a function" (code attached)?

Question

Any ideas why I am getting the following this "dispatch is not a function" error in my listEventsActionCreator function when it calls "dispatch(listEventsRequestedAction())" ???

If I comment out the lines in this method after the dispatch it actually then works which is strange.

Using react-create-app, with redux, typescript, thunk.

ERROR:

TypeError: dispatch(...) is not a function

CODE:

export function listEventsRequestedAction() {
    return {
        type: PlannerEventTypes.LIST_EVENTS_REQUESTED
    }
}

export const listEventsReceivedAction = (events:PlannerEvent[]) => {
    return {
        type: PlannerEventTypes.LIST_EVENTS_RECEIVED,
        events
    }
}

export const listEventsErrorAction = (err:any) => {
    return {
        type: PlannerEventTypes.LIST_EVENTS_ERROR,
        error: err
    }
}

export const listEventsActionCreator = () => {
    return (dispatch: any) => {
        dispatch(listEventsRequestedAction())  // <== ERROR: TypeError: dispatch(...) is not a function
        (API.graphql(graphqlOperation(listEvents)) as Promise<any>).then((results:any) => {
            const events = results.data.listEvents.items
            dispatch(listEventsReceivedAction(events))
        }).catch((err:any) => {
            // console.log("ERROR")
            dispatch(listEventsErrorAction(err))
        })
    }
}

package.json

{
  "name": "planner",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/graphql": "^14.0.7",
    "@types/react-redux": "^6.0.10",
    "aws-amplify": "^1.1.19",
    "aws-amplify-react": "^2.3.0",
    "date-fns": "^1.30.1",
    "eslint": "^5.9.0",
    "konva": "^2.5.1",
    "moment": "^2.22.2",
    "moment-timezone": "^0.5.23",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-draggable": "^3.0.5",
    "react-konva": "^16.6.31",
    "react-moment": "^0.8.4",
    "react-redux": "^5.1.1",
    "react-scripts-ts": "3.1.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.10",
    "@types/node": "^10.12.10",
    "@types/react": "^16.7.10",
    "@types/react-dom": "^16.0.11",
    "@types/redux-logger": "^3.0.7",
    "typescript": "^3.2.1"
  }
}

index.tsx

import * as React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { applyMiddleware, createStore } from 'redux'
import App from './App'
import './index.css'
import rootReducer from './reducers/index'
import registerServiceWorker from './registerServiceWorker'

import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'

const loggerMiddleware = createLogger()
const store = createStore (
  rootReducer,
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    loggerMiddleware // neat middleware that logs actions
  )
)

render(
  <Provider store={store}>
    <App testStr='test' />
  </Provider>
  ,document.getElementById('root') as HTMLElement
);
registerServiceWorker();

Answer 1

The problem is because of the syntax that you followed. You don't have a semicolon after dispatch(listEventsRequestedAction()) and since you follow it up with (API.graphql(graphqlOperation(listEvents) as Promise<any>) while compiling it is evaluted as dispatch(listEventsRequestedAction())(API.graphql(graphqlOperation(listEvents) as Promise<any>) and hence it gives you the error.

Adding a semicolon after dispatch(listEventsRequestedAction()) would work

export const listEventsActionCreator = () => {
    return (dispatch: any) => {
        dispatch(listEventsRequestedAction()); 
        (API.graphql(graphqlOperation(listEvents)) as Promise<any>).then((results:any) => {
            const events = results.data.listEvents.items
            dispatch(listEventsReceivedAction(events))
        }).catch((err:any) => {
            // console.log("ERROR")
            dispatch(listEventsErrorAction(err))
        })
    }
}

PS The semicolon is not required in Javascript and would not cause a js error on its own. It could however cause an error if concatenating with other scripts.