[英]TypeError: Dispatch is not a Function in actions.js file
I'm working on a React-Redux app with Redux-thunk middleware. 我正在使用带有Redux-thunk中间件的React-Redux应用程序。 I'm getting an error that says: 'TypeError: Dispatch is not a function" when I try to to execute the function called removeStock() in my actions.js file:
当我尝试在我的actions.js文件中执行名为removeStock()的函数时,出现一个错误:“ TypeError:Dispatch不是一个函数”:
action.js 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() looks like this: removeStock()看起来像这样:
export const removeStock = (stock_name) => {
return {
type: 'REMOVE_PINNED_STOCK',
stock_name: stock_name
}
}
The case statement which corresponds to the 'REMOVE_PINNED_STOCK' action in my reducer looks like this: 与我的减速器中的'REMOVE_PINNED_STOCK'操作相对应的case语句如下所示:
reducer.js reducer.js
case 'REMOVE_PINNED_STOCK':
return {
...state,
stocksData: {
...state.stocksData.delete((stock) => stock.name === action.stock_name)
}
}
I am not sure why I can't dispatch the removeStock() function within my deletePinnedStock() function. 我不确定为什么不能在deletePinnedStock()函数中调度removeStock()函数。 At other points in my action.js file I dispatch functions with no issue.
在我的action.js文件中的其他地方,我毫无问题地调度了函数。
EDIT #1: deletePinnedStock is defined in my component like this: 编辑#1:deletePinnedStock是在我的组件中定义的,如下所示:
stockCard.js 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);
By calling deletePinnedStock
directly, you're just calling it as a function, not dispatching it to the redux store. 通过直接调用
deletePinnedStock
,您只是将其作为函数调用,而不是将其调度到redux存储。 When you pass an action creator to connect()
, it gets added as a prop to your component, and that prop is the one that is mapped to dispatch
. 当您将一个动作创建者传递给
connect()
,它会作为道具添加到您的组件中,而该道具就是映射为dispatch
道具。
In short, replace 简而言之,更换
onClick={deletePinnedStock(user_id, stock.name, stock.id)}
with 同
onClick={this.props.deletePinnedStock(user_id, stock.name, stock.id)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.