poise poise - 2 months ago 96
React JSX Question

Redux dispatch not defined

The code runs when it is on the same file but i came across on error when i try to separate the concern as shown below, my intention is to send the props down to the presentational component and when the presentation component passes the callback method so that the container automatically invoke mapdispatchtoprops.

This the container component

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)


And this pure component

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>
);
}
}


And got Uncaught ReferenceError: dispatch is not defined.

how shall i fix ?

Answer

There is a typo, it should be dispatch not dispath