TypeError: Dispatch 不是 actions.js 文件中的函数
Posted
技术标签:
【中文标题】TypeError: Dispatch 不是 actions.js 文件中的函数【英文标题】:TypeError: Dispatch is not a Function in actions.js file 【发布时间】:2018-01-06 08:56:09 【问题描述】:我正在开发一个带有 Redux-thunk 中间件的 React-Redux 应用程序。当我尝试在我的 actions.js 文件中执行名为 removeStock() 的函数时,我收到一条错误消息:“TypeError: Dispatch is not a function”:
action.js
export const deletePinnedStock = (user_id, stock_name, stock_id) =>
return dispatch =>
ApiService.delete("/users/" + user_id + "/stocks/" + stock_id)
.then(response =>
dispatch(removeStock(stock_name))
console.log('here is the', response)
).catch((errors) =>
console.log(errors)
)
removeStock() 看起来像这样:
export const removeStock = (stock_name) =>
return
type: 'REMOVE_PINNED_STOCK',
stock_name: stock_name
与我的 reducer 中的“REMOVE_PINNED_STOCK”操作对应的 case 语句如下所示:
reducer.js
case 'REMOVE_PINNED_STOCK':
return
...state,
stocksData:
...state.stocksData.delete((stock) => stock.name === action.stock_name)
我不确定为什么不能在我的 deletePinnedStock() 函数中调度 removeStock() 函数。在我的 action.js 文件的其他位置,我毫无问题地调度函数。
编辑#1: deletePinnedStock 在我的组件中定义如下:
stockCard.js
import React, Component from 'react';
import connect from 'react-redux';
import fetchPinnedStocks, deletePinnedStock, fetchStockData from
'../redux/modules/Stock/actions';
import '../styles/spin.css';
import Panel from 'react-uikit-panel';
class StockCard extends Component
render()
const user_id = localStorage.getItem('currentUser_id')
const stock = this.props.stock //should be the stockObj keyed by name
if (!stock)
return null
else
return (
<Panel col='1-2' box title=stock.name margin='bottom' context='primary'>
<div>
Open: stock.openingPrice
</div>
<div>
Close: stock.closingPrice
</div>
<div>
Low: stock.low
</div>
<div>
High: stock.high
</div>
<div>
Trading Volume: stock.volume
</div>
<button type="submit"
onClick=deletePinnedStock(user_id, stock.name, stock.id)>Remove</button>
</Panel>)
function mapStateToProps(state)
return
currentUser: state.auth.currentUser,
stocksData: state.stock.stocksData
export default connect(mapStateToProps, fetchPinnedStocks,
deletePinnedStock, fetchStockData )(StockCard);
【问题讨论】:
很难从所提供的内容中分辨出来。deletePinnedStock
在组件中是如何设置的?
Redux-thunk: `dispatch is not a function`的可能重复
【参考方案1】:
通过直接调用deletePinnedStock
,您只是将其作为函数调用,而不是将其分派到redux store。当您将动作创建者传递给connect()
时,它会作为道具添加到您的组件中,并且该道具是映射到dispatch
的道具。
简而言之,替换
onClick=deletePinnedStock(user_id, stock.name, stock.id)
与
onClick=this.props.deletePinnedStock(user_id, stock.name, stock.id)
【讨论】:
以上是关于TypeError: Dispatch 不是 actions.js 文件中的函数的主要内容,如果未能解决你的问题,请参考以下文章
测试组件 - 挂载钩子中的错误:“TypeError:无法读取未定义的属性 'dispatch'”
v-on 处理程序中的错误:“TypeError:无法读取未定义的属性 'dispatch'”