未定义Redux调度



代码运行时,它是在同一个文件,但我遇到了一个错误,当我试图分离的关注如下所示,我的意图是发送道具到表示组件,当表示组件传递回调方法,以便容器自动调用mapdispatchtoprops。

这个容器组件

    class BankAppContainer extends Component{
          render(){
            let {onDeposit, onWithdraw, balance} = this.props
            return(
              <BankApp
                balance = {balance}
                onDeposit={(amount)=>this.props.onWithdraw(amount)}
                onWithdraw={(amount)=>this.props.onWithdraw(amount)}
                />
            )
          }
        }
        const mapStateToProps = (state) => {
          return {
              balance: state.balance }
        }
        const mapDispatchToProps = (dispath) => {
                return {
                onDeposit: (amount) => dispatch(bankActionCreators.depositIntoAccount(amount)),
                onWithdraw: (amount) => dispatch(bankActionCreators.withdrawFromAccount(amount)) }
                }
                export default connect(mapStateToProps, mapDispatchToProps)(BankAppContainer)

这个纯成分

class BankApp extends Component {

  handleDeposit() {
    if(this.refs.amount.value!=''){
      this.props.onDeposit(this.refs.amount.value);
      this.refs.amount.value = '';
    }
    else{
      console.log("Enter a value")
    }
  }
  handleWithdraw() {
    if(this.refs.amount.value!=''){
      this.props.onWithdraw(this.refs.amount.value);
      this.refs.amount.value = '';
    }
    else{
      console.log("Enter a value")
    }
  }
  render() {
    return (
        <div>
          <h1>Your balance is ${(this.props.balance)}</h1>
          <div className="atm">
            <input type="text" placeholder="Enter Ammount" ref="amount" />
            <button onClick={this.handleWithdraw.bind(this)}>Withdraw</button>
            <button onClick={this.handleDeposit.bind(this)}>Deposit</button>
          </div>
        </div>
      );
    }
}

并得到Uncaught ReferenceError: dispatch is not defined.
我该怎么修理呢?

有一个错别字,应该是dispatch而不是dispath

最新更新