Question

任何想法为何我在调用“ dispatch（listEventsRequestedAction（））”时在listEventsActionCreator函数中收到以下“调度不是函数”错误的提示？

如果我在调度后中注释掉此方法中的行，则它实际上可以工作，这很奇怪。

使用带有redux，打字稿和thunk的react-create-app。

错误：

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

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

问题是由于遵循的语法。您在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。分号在Javascript中不是必需的，并且不会导致 js错误。但是，如果连接起来可能会导致错误与其他脚本。

Redux动作创建者收到“ TypeError：dispatch（...）不是函数”（附加代码）？

1 个答案: