javascript - React Redux 不调度操作

Question

我最近尝试在我的 React 应用程序中实现 redux。

我有一个名为 SignIn 的容器，它实例化了一个 mapDispatchToProps 并将其连接到该组件。SignIn 渲染一个名为 SignInForm 的组件(代码如下)。

在此组件中，我们调用一个名为“SignInUser”的操作来更新 redux 状态，并将其值从“false”更新为“true”

问题是，当我尝试在脚本上调用 this.props.action 时，这只会返回 that object

这是 SignIn 组件代码:

const mapDispatchToProps = dispatch => {
    return { 
        signInUser: () => {
            dispatch(signInUser())
        }
    }
}

function SignIn() {
    return (
        <div className="skr-flex column between-v centered-h stretched">
            <div className="col-retracted stretched-h p-m skr-flex row between-h centered-v">
                <Logo />
            </div>
            <SignInForm signInUser={signInUser} />
        </div>
    )
}

export default connect(null, mapDispatchToProps)(SignIn)

这里只是应该进行调度的部分

constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
}

handleClick(event) {
    this.props.signInUser()
}

但是我绝对没有错误，我的所有其余代码似乎都能正常工作

我知道为什么它不起作用，但我是 redux 的纯粹初学者(顺便说一下 stackoverflow)，只需要一些帮助来澄清我的想法

我希望我已经很清楚我的问题了

先谢谢大家了!

Answer 1

signInUser 操作将作为 Prop 提供给您的组件。因此，您需要从 props 访问它。

const SignIn = (props) => {
return (
    <div className="skr-flex column between-v centered-h stretched">
        <div className="col-retracted stretched-h p-m skr-flex row between-h centered-v">
            <Logo />
        </div>
        <SignInForm signInUser={props.signInUser} />
    </div>
)
}

export default connect(null, mapDispatchToProps)(SignIn)