Вместо двух разных страниц с очень похожими формами для входа в систему и регистрации я реорганизую код.Компонент высшего порядка (аутентификация) содержит все методы форм и передает его обернутым компонентам (формы SignIn и SignUp).HOC подключен к магазину через контейнер (индекс).Вот ссылка на репозиторий github приложения
. При попытке входа в систему или входа в нее запускается действие, но происходит сбой эфира или хранилище не обновляется.Я не могу понять, что происходит не так.
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)
}
}