Reactjs React redux:未触发MapStateTops（）

我正在尝试编写代码，以便在react和react redux中执行以下操作： 1.用户使用电子邮件和密码使用登录表单登录

二,。信息正确后，从数据库中查询用户的信息用户名、配置文件图片等，并将其保存到Javascript对象中

三,。触发将对象发送到减速器的操作

四,。Reducer将对象放入存储

五,。更新存储后，返回用户名并将其呈现到登录页面。 我写了下面的代码，并使用console.log，我看到在3之前的所有步骤都可以正常工作。但是，用户名不会返回到原始页面。我使用了MapStateTops，当我登录控制台时，根本没有调用它。可能是因为存储实际上没有被更新，或者是因为mapStateToProps实现有问题。有人能看看下面的代码帮我吗

代码如下：

签名

import React from 'react';
import './App.css';
import * as firebase from 'firebase';
import {connect} from 'react-redux';
import {actionCreators} from './Store';

let userinfo={}; //To save the info queried by the 'signin' function

const signin = () => {  
    /*
    Code for querying data from Database. Works fine.
    */
            actionCreators.login(userinfo); // After the query is done, trigger the action to update the store. This one works fine too
 }

function Signin(props) {
    return (
    <div>
     /*
     Component description for signin form
     */
        <button className="login_button" id ="lib" onClick={signin}>Sign in</button>
        <div>
           Hello, {props.username}! 
        </div>
    </div>  
    )
}

function mapDispatchToProps(dispatch,userinfo) {
    return {
        login: () => dispatch(actionCreators.login(userinfo))
    }
}

function mapStateToProps(state) {
    return { 
        username: state.username 
    };
}

export default connect(mapStateToProps,mapDispatchToProps)(Signin);

非常感谢

试着这样做：

const mapStateToProps = (state, ownProps) => ({ username: state.username });

尝试在react中使用ES概念

actionCreators.login(userinfo); // After the query is done, trigger the action to update the store. This one works fine too

这不会分派操作。它只是创造动作，然后什么也不做。为了让你的减速器被调用，你需要调度动作

您已经在使用mapDispatchToProps创建登录道具，因此需要使用该道具。我觉得奇怪的是，您在组件之外创建了一个额外的signin函数，但由于省略了该代码，因此我无法给您提供关于替代方法的建议。因此，如果您需要保留sign函数，则需要进行两次调用：一次调用sign，一次调用props.login：

---

这对解决他们的问题有什么不同？我们可以避免箭头函数中的绑定问题什么绑定问题？这在代码中没有出现。嗨，我把所有的signin函数代码移到了组件代码中，现在它可以工作了。谢谢！！

actionCreators.login(userinfo); // After the query is done, trigger the action to update the store. This one works fine too

<button className="login_button" id ="lib" onClick={() => {
  signin();
  props.login(userinfo);
}}>Sign in</button>