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

Question

我对 react/redux（以及一般的 javascript）还很陌生，所以请耐心等待我在这里使用的术语...

我试图了解组件和减速器的工作原理，所以目前我正在练习一个小应用程序，我主要从教程中复制/粘贴。我遇到的问题是，我试图从我的组件调度一个改变 Redux 状态的操作，但是当我从组件调度一个操作时，我什至没有在我的减速器函数中看到我的 console.log() 消息.

这是我目前拥有的：

应用程序.js

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

动作.js

export 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:&nbsp;()&nbsp;=>&nbsp;{&nbsp;dispatch(loginSuccess())&nbsp;}

Answer 2

comonentDidUpdate，因为您已经拥有它：&nbsp; &nbsp;componentDidMount() {&nbsp; &nbsp; &nbsp; &nbsp; console.log("TwApp componentDidMount")&nbsp; &nbsp; &nbsp; &nbsp; this.props.loginSuccess()&nbsp;&nbsp; &nbsp; }然后mapDispatchToProps完全删除您的功能并导出以下内容：export default connect(mapStateToProps, {loginSuccess})(TwApp)