javascript - Redux Action 创建者获得 "TypeError: dispatch(...) is not a function"(附代码)？

Question

为什么我的 listEventsActionCreator 函数在调用“dispatch(listEventsRequestedAction())”时出现以下“dispatch is not a function”错误？？？

如果我在 分派(dispatch)之后注释掉此方法中的行，它实际上会起作用，这很奇怪。

使用 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

问题是因为您遵循的语法。你没有 semicolon在 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))
        })
    }
}

P.S. 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.