将组件状态传递给 redux-form onSubmit

Question

这里是 redux-form 的新手。我有一个具有 2 个不同操作的登录模式：登录和注册。角色（存储在组件状态中）默认为 login，用户可以单击按钮将其更改为 register。

我卡住的地方是，我想将该状态片段传递给 onSubmit() 函数，以便我可以根据用户是尝试登录还是注册来分派正确的操作。

我的想法是我可以将这个名为 signInType 的状态作为 prop 传递给函数。当然，它没有像我预期的那样工作。我可以通过 reduxForm HOC 传递一个 prop，但是从那个函数我无法访问组件的状态。

以下是我的组件的相关部分，以帮助理解我的最终目标：

const [signInType, setSignInType] = useState('login')

const onSubmit = (data, dispatch, props) => {
  console.log('props: ', props);
  if (props.signInType === 'login') {
    return (
      api.post('/Login', data)
      .then(json => {
        const response = JSON.parse(json.d)
        if (!response.userid) {
          console.error(response.message)
          dispatch(emailLoginFailure(response.message))
          return response.message
        }
        LogRocket.identify(response.userid, {
          email: data.email,
        })
        dispatch(emailLoginSuccess(response))
      })
      .catch(err => {
        console.error(err)
        dispatch(emailLoginFailure(err))
      })
    )
  } else if (props.signInType === 'register') {
    return (
      api.post('/RegisterByEmail', {
        email: data.email,
        password: data.password,
        utm_source: "Development",
        utm_medium: "email",
        utm_campaign: "Campaign Test",
        utm_term: "N/A",
        utm_content: "123",
        utm_date: "2019-02-11 12:25:36"
      })
      .then(json => {
        const response = JSON.parse(json.d)
        if (!response.userid) {
          console.error(response.message)
          dispatch(emailRegisterFailure(response.message))
          return response.message
        }
        // LogRocket.identify(response.userid, {
        //   email: data.email,
        // })
        dispatch(emailRegisterSuccess(response))
      })
      .catch(err => {
        console.error("Unable to register email:", err)
      })
    )
  } else {
    console.error("error: No signin type?")
  }
}

感谢您的帮助:)

Answer 1

这样的 login/register 流程我更喜欢用不同的组件处理它，以尊重和遵循 SRP。

另外，我不确定你是如何组织你的组件的，但我是这样处理这种情况的：

你的模态：

* 它将只负责呈现登录或注册表单。

const Modal = () => {
  const [signInType, ] = useState('login')

  const isLogin = signInType === 'login' 

  return <>
    { isLogin ? <LoginForm /> : <RegisterForm /> }

    <button onClick={() => setSignInType(isLogin ? 'register' : 'login')}>
      { isLogin ? 'Sign up' : 'Sign in' }
    </button>
  </>
}

登录表单：

* 现在您可以将登录操作传递给 onSubmit prop。 Login 将是您的演示组件，而 LoginForm 用 reduxForm HOC 装饰 Login。

export default reduxForm({
  form: 'login',
  onSubmit: data => {}
})(Login)

注册表单：

* 这里跟LoginForm一样的思路。

export default reduxForm({
  form: 'register',
  onSubmit: data => {}
})(Register)

将组件状态传递给 redux-form onSubmit

passing component state to redux-form onSubmit

redux-form