Async Action: Getting a class in return instead of dispatch function

Question

I'm using react, redux-thunk, async action for signin gets a dispatch function like it should be async action for signout gets a class with properties of event like target etc when consoling the dispatch.

Navbar.jsx

const Navbar = ({ profile, history }) => {
    return (
        <nav>
            <Button type="danger" onClick={signOut(history)}>
               Logout
            </Button>
        </nav>
    )
}

const mapStateToProps = state => ({
    profile: state.firebase.profile,
})

const mapDispatchToProps = dispatch => ({
    signOut: history => dispatch(signOut(history)),
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(Navbar))

Async Action

export const signIn = ({ email, password }, history) => {
    return (dispatch, getState) => {
        auth.signInWithEmailAndPassword(email, password)
            .then(() => {
                console.log('TCL: dispatch', dispatch) // returns dispatch function
                history.push('/')
                dispatch({ type: 'LOGIN_SUCCESS' })
            })
            .catch(err => {
                dispatch({ type: 'LOGIN_ERROR', err })
            })
    }
}

export const signOut = history => (dispatch, getState) => {
    auth.signOut()
        .then(() => {
            console.log('TCL: dispatch', dispatch) // return class and throws dispatch is not a function
            history.push('/login')
            dispatch({ type: 'SIGNOUT_SUCCESS' })
        })
        .catch(err => console.log(err))
}

When you say it returns a class, what class are you getting? — James
It has currentTarget, target properties, so I'm assuming it's event that's being passed for some reason. — prvnbist

prvnbist prvnbist · Accepted Answer · 2019-07-25T10:41:20

Found the solution - I also needed to get the signOut from the props as well

import {signOut} from '../store/actions/authActions'
const Navbar = ({ profile, history, signOut }) => { // adding "signOut" solved it.
    return (
        <nav>
            <Button type="danger" onClick={() => signOut(history)}>
               Logout
            </Button>
        </nav>
    )
}

Async Action: Getting a class in return instead of dispatch function

2 Answers