代码之家  ›  专栏  ›  技术社区  ›  kouign_amann

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

  •  0
  • kouign_amann  · 技术社区  · 7 年前

    我正在使用Redux thunk中间件开发React Redux应用程序。当我试图执行actions.js文件中名为removeStock()的函数时,出现了一个错误:“TypeError:Dispatch不是一个函数”:

    动作.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
      }
    }
    

    减速器.js

      case 'REMOVE_PINNED_STOCK':
        return {
          ...state, 
          stocksData: {
          ...state.stocksData.delete((stock) => stock.name === action.stock_name)
          }
      }
    

    我不确定为什么不能在deletePinnedStock()函数中调度removeStock()函数。在我行动的其他方面。js文件I无问题地调度函数。

    编辑#1:

    股票卡.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); 
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   mpalmer    7 年前

    通过呼叫 deletePinnedStock 直接来说,您只是将其作为函数调用,而不是将其分派到redux商店。当您将动作创建者传递给 connect() ,它将作为道具添加到组件中,并且该道具是映射到的道具 dispatch .

    简而言之,更换

    onClick={deletePinnedStock(user_id, stock.name, stock.id)}
    

    onClick={this.props.deletePinnedStock(user_id, stock.name, stock.id)}