javascript - Redux 动作创建者得到“TypeError:dispatch(...) is not a function”(附加代码)?
问题描述
任何想法为什么我在调用“dispatch(listEventsRequestedAction())”时在我的 listEventsActionCreator 函数中收到以下“dispatch is not a function”错误???
如果我在调度之后注释掉这个方法中的行,那么它实际上会起作用,这很奇怪。
使用 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();
解决方案
问题在于您遵循的语法。你没有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))
})
}
}
PS 分号在 Javascript 中不是必需的,它本身不会导致 js 错误。但是,如果与其他脚本连接,它可能会导致错误。
推荐阅读
- ruby-on-rails - Rails 关联字段未保存
- android - 活动内容转换不起作用
- javascript - hsv到rgb颜色转换背后的数学
- docker - Centos 上的准备失败错误
- c - 使用 C、winsock(windows) 在三星 Tizen 推送服务器中推送消息
- google-api - [google-drive-sdk]:我可以将整个文件夹上传到 goolge 驱动器吗?
- csv - 当 Jmeter 的响应数据是 XML 格式时,在输出的 CSV 文件中我们生成的格式是不可读的。如何克服它
- javascript - “lazy-initialize” In ChartJS
- php - 我想在下面给出的代码中在 php 和 html 中使用越来越少的变量如何减少变量的数量
- php - 尝试使用 PHP 从 json google API 中提取数据