在组件中使用 dispatch() 时未调用 Redux 减速器

Question

我对 react/redux（以及一般的 javascript）还很陌生，所以请耐心等待我在这里使用的术语...我试图了解组件和减速器的工作原理，所以目前我正在练习一个小应用程序，我主要从教程中复制/粘贴。我遇到的问题是，我试图从我的组件调度一个改变 Redux 状态的操作，但是当我从组件调度一个操作时，我什至没有在我的减速器函数中看到我的 console.log() 消息.这是我目前拥有的：应用程序.jsimport React, { Component, PropTypes } from 'react'import { connect } from 'react-redux'import { TWAPP_USERDATA_AUTH_TOKEN } from '../Constants'import { loginSuccess } from '../actions'class TwApp extends Component {    constructor(props) {        super(props)        this.handleChange = this.handleChange.bind(this)        this.handleRefreshClick = this.handleRefreshClick.bind(this)    }    componentDidMount() {        console.log("TwApp componentDidMount")        this.props.loginSuccess() // This is where I want to dispatch an action    }    componentDidUpdate() {    }    handleChange() {    }    handleRefreshClick(e) {        e.preventDefault()        this.props.loginSuccess()    }    render() {        const { loggedIn } = this.props;        console.log("Rendering TwApp.")        if (!loggedIn) {            console.log("user not logged in. loggedIn = " + loggedIn)        }        else {            return (                <div>                    <p>Success</p>                </div>            )        }    }}function mapStateToProps(state) {    // nothing for now}function mapDispatchToProps(dispatch) {    return {        loginSuccess: () => { dispatch(loginSuccess) }    }}export default connect(mapStateToProps, mapDispatchToProps)(TwApp)动作.jsexport const USER_LOGIN_SUCCESS = 'USER_LOGIN_SUCCESS'export function loginSuccess() {    return {        type: USER_LOGIN_SUCCESS,    }}reducer1 和 reducer2 的 console.log() 消息都不会出现在控制台中。当我从 TwApp 组件调用 dispatch() 时，是否会调用所有减速器（reducer1 和 reducer2）？我误解了什么吗？

Answer 1

您正在调度“loginSuccess”，它是一个函数，或者用 redux 术语来说是一个动作创建者。
您应该将作为普通对象的操作分派给您的减速器。

您想要做的是调度 loginSuccess 将为您创建的操作：

loginSuccess: () => { dispatch(loginSuccess()) }

Answer 2

comonentDidUpdate，因为您已经拥有它：

   componentDidMount() {

        console.log("TwApp componentDidMount")

        this.props.loginSuccess() 

    }

然后mapDispatchToProps完全删除您的功能并导出以下内容：

export default connect(mapStateToProps, {loginSuccess})(TwApp)