Реактивный дескриптор входа и регистрации - PullRequest
Новая
       6

Реактивный дескриптор входа и регистрации

0 голосов
/ 25 февраля 2019

После того, как пользователь нажмет кнопку входа в систему, я хочу сделать 3 шага в следующем порядке: 1) зарегистрировать пользователя на сервере 2) зарегистрировать пользователя на сервере 3) открыть домашнюю страницу

this.props.loginthis.props.signUp - это асинхронная функция, поступающая из действия.Какой правильный способ заставить их работать один за другим в определенном порядке?Должен ли я использовать обратные вызовы или какой-нибудь метод жизненного цикла?

Пожалуйста, приведите пример, как заставить это работать.

Спасибо!

...
import { login, signUp} from 'action';

class Auth extends Component {

    handleLogin(){
      const { name, email, password} = this.props; 
      this.props.signUp( name, email, password)
      this.props.login(email,  password)
      this.props.navigtion.navigate('Home')
    }
  render(){
    return(
      <View>
        <Button 
          title='Login'
          onPress={()=> this.handleLogin()}
        />
      </View>
    )
  }
}

Ответы [ 2 ]

0 голосов
/ 25 февраля 2019

это то, как я это сделал, и все это работает, но я не уверен, что это нормально с точки зрения передового опыта и ясного синтаксиса.

Когда пользователь нажимает кнопку, он запускается _handleSignup () послепроверяя все входы, он запускает асинхронную функцию шаг за шагом.

  async _handleSignup() {
    const { name, email, password, passwordConfirm, phone } = this.props;
    if (name.length === 0 && email.length === 0) {
      Alert.alert('Make sure all inputs is filled');
      return;
    } else if (password !== passwordConfirm) {
      Alert.alert('Password not match');
      return;
    }
      await this.props.signUp(name, email, password)
      await this.props.login(email, password).then(
        Alert.alert('Account created', [
          {
            text:'Login',
            onPress: ()=> this.props.navigation.navigate('Category')
          }
        ])
      )
  }
0 голосов
/ 25 февраля 2019

Вы можете использовать async await в handleLogin ().Таким образом, login () будет вызываться только после разрешения обещания signUp (). 

async handleLogin(){
      const { name, email, password} = this.props; 
      await this.props.signUp(name, email, password)
      await this.props.login(email,  password)
      this.props.navigtion.navigate('Home')
    }

Другим способом было бы поместить login () в .then функции signUp ().Это будет работать так же, как асинхронное ожидание.Имя входа () будет вызвано после разрешения функции signUp ().Затем вы можете поместить navigate () внутри .then в login (), если вы хотите перемещаться только после того, как пользователь вошел в систему. 

handleLogin(){
      const { name, email, password} = this.props; 
      this.props.signUp(name, email, password)
      .then(this.props.login(email,  password)
      .then(this.props.navigtion.navigate('Home'))
      )
    }

Надеюсь, это поможет.

...