CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Edi_Hadzic
Edi_Hadzic

Reputation: 133

React redux can not get the dispatch right

I am trying to make a call that changes redux state but i am having problems with dispatching the action. I am sure all imports are correct. I think the main problem is in mapStateToProps but just cant seem to find it.

Call

 onClick={() => this.props.ethereum}

mapStateToProps and other...

const mapStateToProps = state => {
  return({
    depositMenu: state.depositMenu
  })
}

const mapDispatchToProps = dispatch => {
  return ( {
    visa: () => dispatch(visa()),
    bitcoin: () => dispatch(bitcoin()),
    ethereum: () => dispatch(ethereum())
  })
}
export default connect(
  mapStateToProps,mapDispatchToProps
)(Deposit)

Actions

export const visa= () => {
    return {
        type: 'VISA'
    }
}

export const bitcoin = () => {
    return {
        type: 'BITCOIN'
    }
}

export const ethereum = () => {
    return {
        type: 'ETHEREUM'
    }
}

Reducer

const MainPageDeposit = (state = 'visa', action) => {
    switch (action.type) {
        case 'VISA':
            return state = 'visa';
        case 'ETHEREUM':
            return state = 'ethereum';
        case 'BITCOIN':
            return state = 'bitcoin';
        default:
            return state;
    }
}

export default MainPageDeposit;

And combine reducers

import MainPageDeposit from './MainPageDeposit';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    depositMenu: MainPageDeposit,
})

export default allReducers;

Upvotes: 0

Views: 56

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

I think you should change onClick={() => this.props.ethereum} to onClick={this.props.ethereum}

Upvotes: 3

Related Questions