Redux 動作創建者收到“TypeError: dispatch(...) is not a function”（附上代碼）？

Question

我的 listEventsActionCreator 函數在調用“dispatch(listEventsRequestedAction())”時為什么會出現以下“調度不是函數”錯誤的任何想法？

如果我在調度之后注釋掉這個方法中的行，它實際上會起作用，這很奇怪。

使用 react-create-app，配合 redux、typescript、thunk。

錯誤：

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

代碼：

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

包.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"
  }
}

索引.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

問題在於您遵循的語法。 在dispatch(listEventsRequestedAction())之后你沒有semicolon ，因為你在編譯它時用(API.graphql(graphqlOperation(listEvents) as Promise<any>) dispatch(listEventsRequestedAction())(API.graphql(graphqlOperation(listEvents) as Promise<any>)它被dispatch(listEventsRequestedAction())(API.graphql(graphqlOperation(listEvents) as Promise<any>)為dispatch(listEventsRequestedAction())(API.graphql(graphqlOperation(listEvents) as Promise<any>)因此它會給你錯誤。

在dispatch(listEventsRequestedAction())之后添加分號會起作用

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 分號在 Javascript 中不是必需的，它本身不會導致 js 錯誤。 但是，如果與其他腳本連接，則可能會導致錯誤。