处理来自容器组件的异步操作的最佳方式

Question

我有两个异步操作，我必须确保它们在继续下一个代码块之前被正确执行。

代码如下所示：

createUser = () => {
    let user = this.state.user
    //create user session (this is a async action - thunk)
    //What is the correct way to wait until this method is executed?
    this.props.createSession(user)
    //if session exists means it was created
    if(this.props.session.session) {
      //What is the correct way to wait until this method is executed?
      this.props.createUser(user) //another async action
      if(this.props.userReducer.currentUser) {
        ToastAndroid.show('User registered successfully!', ToastAndroid.SHORT)
        this.props.goTo('productsContainer') //transition to the next scene
      }
    } else {
      ToastAndroid.show(this.props.session.err, ToastAndroid.SHORT)
    }
}

因为方法 createSession() 和 createUser() 是异步操作，所以在执行第一个和第二个之前，我有点不知道如何"wait"。

也许这是一个愚蠢的问题，但我是 react-redux 世界的新手。

Answer 1

鉴于操作是异步的，它们 return 承诺。所以，等待承诺：

createUser = () => {
    let user = this.state.user
    //create user session (this is a async action - thunk)
    //What is the correct way to wait until this method is executed?
    this.props.createSession(user)
        .then(() => {
            //if session exists means it was created
            if(this.props.session.session) {
              //What is the correct way to wait until this method is executed?
              this.props.createUser(user) //another async action
              if(this.props.userReducer.currentUser) {
                ToastAndroid.show('User registered successfully!', ToastAndroid.SHORT)
                this.props.goTo('productsContainer') //transition to the next scene
              }
            } else {
              ToastAndroid.show(this.props.session.err, ToastAndroid.SHORT)
            }
        })
}

以此类推

如果您使用的是 Babel 或 TypeScript，您还可以使用 async/await 语法：

createUser = async function() {
    let user = this.state.user
    //create user session (this is a async action - thunk)
    //What is the correct way to wait until this method is executed?
    await this.props.createSession(user)
    //if session exists means it was created
    if(this.props.session.session) {
      //What is the correct way to wait until this method is executed?
      await this.props.createUser(user) //another async action
      if(this.props.userReducer.currentUser) {
        ToastAndroid.show('User registered successfully!', ToastAndroid.SHORT)
        this.props.goTo('productsContainer') //transition to the next scene
      }
    } else {
      ToastAndroid.show(this.props.session.err, ToastAndroid.SHORT)
    }
}.bind(this)

然而，考虑到整个方法仅通过传入 props 的数据起作用（state.user 除外），这些数据似乎无论如何都来自商店，因此转向更有意义整个方法变成一个动作：

createUser = () => props.createSessionAndUser(this.state.user)
...
// implement entire logic in createSessionAndUser action

处理来自容器组件的异步操作的最佳方式

Best way to handle async actions from container components

reactjs

asynchronous

react-native

redux

redux-thunk