React Hooks从react-redux更新道具

时间:2019-05-13 17:20:35

标签: reactjs redux react-redux react-hooks

我在使用Redux更新道具时遇到问题。我正在使用redux-promise-middleware,并发出登录请求。我的钩子收到了initialState。当我在mapStateToProps函数中进行console.log时,我可以看到调度程序和reducer正在正确更新。但是,道具永远不会使用redux进行更新。

const Login = (props) => {

const [email, updateEmail] = useState('')
    const [password, updatePassword] = useState('')
    const [firstName, updateFirstName] = useState('')
    const [lastName, updateLastName] = useState('')
    const [loginToggle, updateLoginToggle] = useState(true)

async function handleLogin() {
    const loginInfo = {email, password}
    await props.loginUser(loginInfo)
    if (props.user.loggedIn) props.history.push('/dashboard');
}

    return (
        <div className="login-page">
            <div className="login-register-container"> 
                { loginToggle ?(  
                <div className="login-container">
                    <h2>Login</h2>
                    <input placeholder='Email' value={email} onChange={e => 
 updateEmail(e.target.value)} />
                    <input placeholder='Password' value={password} onChange={e => updatePassword(e.target.value)} />
                    <button onClick={handleLogin}> Login </button>
                    <p style={{cursor:"pointer"}} onClick={() => updateLoginToggle(false)}> need to register?</p>
                </div>
                ):(
                <div className="register-container">
                    <h2>Register</h2>
                    <input placeholder='First Name' value={firstName} onChange={e => updateFirstName(e.target.value)} />
                    <input placeholder='Last Name' value={lastName} onChange={e => updateLastName(e.target.value)} />
                    <input placeholder='Email' value={email} onChange={e => updateEmail(e.target.value)} />
                    <input placeholder='Password' value={password} onChange={e => updatePassword(e.target.value)} />
                    <button onClick={handleRegister}> Register </button>
                    <p style={{cursor:"pointer"}} onClick={() => updateLoginToggle(true)}> already have login?</p>
                </div>
                )}
            </div>
        </div>
    )
}

function mapStateToProps(reduxState) {
    console.log(reduxState)
    return {
        user: reduxState.user
    }
};


export default connect(mapStateToProps, {loginUser, getUser})(Login)

0 个答案:

没有答案