我将重构代码,而不是使用两个具有非常相似的表单进行登录和注册的页面。高阶组件(认证)包含所有forms方法,并将其传递给包装的组件(SignIn和SignUp表单)。 HOC通过容器(索引)连接到商店。 这是指向app's github repository
的链接尝试登录或注册时会触发操作,但是操作失败或商店未更新。我真的不知道出了什么问题。
import SignIn from './Forms/SignIn'
import SignUp from './Forms/SignUp'
import { startEmailPasswordLogin, startCreateUserAccount } from '../../actions/auth'
import authenticate from './authenticate'
const SignInForm = authenticate(SignIn)
const SignUpForm = authenticate(SignUp)
export class Authenticate extends React.Component {
constructor(props) {
super(props)
this.state = {
isSignIn: true
}
this.toggleForm = this.toggleForm.bind(this)
}
toggleForm() {
this.setState(() => ({
isSignIn: !this.state.isSignIn
}))
}
render() {
const { startCreateUserAccount, startEmailPasswordLogin } = this.props
return (
<div className="box-layout">
<div className="box-layout__box">
<AuthProviders />
</div>
{
this.state.isSignIn ? (
<SignInForm
onSubmit={startEmailPasswordLogin}
showSignUp={this.toggleForm}
/>
) :
(
<SignUpForm
onSubmit={startCreateUserAccount}
showSignIn={this.toggleForm}
/>
)
}
</div>
)
}
}
const mapDispatchToProps = (dispatch) => ({
startCreateUserAccount: (email, password) => dispatch(startCreateUserAccount(email, password)),
startEmailPasswordLogin: (email, password) => dispatch(startEmailPasswordLogin(email, password))
})
export default connect(undefined, mapDispatchToProps)(Authenticate)
这是操作的代码:
export const startEmailPasswordLogin = (email, password) => {
return () => {
return firebase.auth().signInWithEmailAndPassword(email, password)
}
}