Question

我正在使用React，redux-thunk，用于登录的异步操作获取调度功能，就像它应该是用于在退出时获取具有诸如target等事件属性的类的事件的异步操作一样。

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

异步操作

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

Answer 1

连接事件处理程序时，您正在调用signOut函数，该事件处理程序将结果分配给onClick处理程序，即

onClick={signOut(history)}

这意味着onClick将触发(dispatch, getState) => ...，并说明为什么dispatch === evt。您需要使用事件处理程序包装呼叫以吞下click事件：

onClick={() => signOut(history)}

Answer 2

找到了解决方案-我还需要从道具中获取signOut

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

异步操作：获取类而不是调度函数

2 个答案: