Question

使用redux-saga和react router 4。我正在尝试实现用户注册流程。我关注的是在/user/register路线上向用户显示注册屏幕的部分。

目标

目标是根据成功创建的用户或已经存在的用户，在与Alert相同的屏幕上更新用户注册的状态。我正在使用redux-saga，并从传奇中使用history.push来更新视图。

问题

仅在重新加载/user/register页面后显示警报。

我正在从传奇中将状态传递到history.push，然后根据从this.props.location.state中提取的状态在组件中准备警报内容。

注册组件

// Form submission handler
handleUserRegistration = user => {
   this.props.registerUser(user, this.props.history);
}

// Prepring the alert content
getAlertUI = signupState =>  {
   if (signupState.signupSuccess) {
       return <UncontrolledAlert color='success'>{'Verification email sent. Please verify your account.'}</UncontrolledAlert>
   }else {
       return <UncontrolledAlert color='danger'>{signupState.error.message}</UncontrolledAlert>
   }
}

render () {
  let alertContent = null;

  const signupResponse = this.props.location.state;
  if (signupResponse) {
   if (signupResponse.error) {
     alertContent = this.getAlertUI({signupSuccess: false, error: signupResponse.error});
   }else {
     if (signupResponse.verificationEmailSent) {
       alertContent = this.getAlertUI({signupSuccess: true})
     }
   }
  }

  return (
   <div> {alertContent} </div>
   // My form component goes here.
  )
}

虽然是我的saga。我正在将history.push与必要的信息一起使用。

saga.js

const registerWithEmailPasswordAsync = async (userData) =>

    await axios.post(apiUrls.SINGUP_USER, userData )
                    .then(response => {
                        return {
                            isError: false,
                            data: response.data,
                        }
                    })
                    .catch(error => {
                        return {
                            isError: true,
                            errorDetails: {
                                status: error.response ? error.response.status : null,
                                message: error.response ? error.response.data : null,
                            }
                        }
                    })

function* registerUser({ payload }) {
    const { history } = payload;
    try {
        const registerUser = yield call(registerWithEmailPasswordAsync, payload.user);
        if (!registerUser.isError) {
            history.push('/user/register', {verificationEmailSent: true});
        } else {
            if (registerUser.errorDetails) {
                history.push('/user/register', {error: registerUser.errorDetails} );
            }
        }
    } catch (error) {
        console.log('register error : ', error)
    }
}

我对此很陌生，请分享一下这是否是更好的方法？如果这就是为什么它不更新我的观点。任何指针都受到高度赞赏。

Answer 1

不要仅使用> Data patientid group 1: 100 1 2: 100 1 3: 100 1 4: 101 2 5: 101 2 6: 101 2 7: 102 1 8: 102 1 9: 102 1 10: 104 2 11: 104 2 12: 104 2来更新状态 我能从传奇中看到您使用history.push的唯一原因是在成功注册后将用户发送到仪表板/验证页面。没有理由使用history.push仅将某些状态动态传递给组件。通过调度操作而不是使用history.push
来更新您的redux状态
您不必一定要更新状态来通知用户注册错误 您问您一般的方法是否最好。就我个人而言，我认为不是。我不会那么努力的。只需使用类似react-toastify的名称即可。然后，您可以将history.push放在ToastContainer组件中，然后调用App

React Router 4历史记录推送组件重新渲染

1 个答案: