React router 4 рендеринг компонента push истории

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)
    }
}

Я довольно новичок в этом, пожалуйста, поделитесь, если это лучший подход или нет? И если это почему не обновляет мой взгляд. Любые указатели высоко ценятся.