Reduxディスパッチが定義されていません

Question

コードは同じファイルにあるときに実行されますが、以下に示すように懸念を分離しようとするとエラーが発生しました。私の意図はプレゼンテーションをプレゼンテーションコンポーネントに送りますコンポーネントが自動的に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> 
    ); 
    } 
} 

そして捕捉されないにReferenceErrorを得た：ディスパッチが定義されていません。
どうすれば修正できますか？

Answer 1

タイプミスがあります。dispatchはありませんdispath