ukiyakimura ukiyakimura - 4 years ago 200
React JSX Question

REACT Uncaught TypeError .then is not a function

i'm doing function in my react component like this :

const Logged = (props) => {

const doLogout = () => {
props.logout().then(() => browserHistory.push('/'));
}

return(
<IconMenu
{...Props}
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Sign out"
onTouchTap={doLogout}
/>
</IconMenu>
)
};


i already wrap the dispatch in the component and connect it.

const mapDispatchToProps = (dispatch) => {
return {
logout: () => (
dispatch(logoutUser)
)
}
}


this is my action:

export function logoutUser(){
return (dispatch) => {
return new Promise((resolve) => {
dispatch({
type : LOGOUT_USER,
});
resolve();
})
}
};


and this is my reducer :

case LOGOUT_USER :
return Object.assign({}, state, {autenticated : false});


i always got this error


Uncaught TypeError: props.logout(...).then is not a function
at Object.doLogout [as onTouchTap] (eval at

Answer Source

I think you meant

function mapDispatchToProps(dispatch) {
    return {
        logout: logoutUser(dispatch)
    };
}

export function logoutUser(dispatch) {
    return () => {
        return new Promise((resolve) => { 
            dispatch({
                type: LOGOUT_USER,
            });
            resolve();
        });
    };
}

Although it doesn't look like there's anything asynchronous happening, so no reason to wait for anything.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download