TypeError: Dispatch 不是 actions.js 文件中的函数

Posted 2023-03-10

【中文标题】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)