在React Native Redux中調度導入的函數

這是我第一次使用React Native，並且只使用Redux，但我的Redux/authentication.js中有一個函數，該函數應該使用Firebase創建一個新帳戶。在React Native Redux中調度導入的函數

export function handleAuthWithFirebase (newUser) { 
    return function (dispatch, getState) { 
     dispatch(authenticating()); 

     console.log(newUser); 
     console.log('Signing up user'); 
     var email = newUser.email; 
     var password = newUser.password; 

     firebase.auth().createUserWithEmailAndPassword(email, password).catch(error => { 
     // Handle Errors here. 
     var errorCode = error.code; 
     var errorMessage = error.message; 
     // ... 
     }).then(() => { 

      var user = firebaseAuth.currentUser; 
      // Set user in Firebase 
      firebase.database().ref('/users/' + user.uid).set({ 
       displayName: newUser.displayName, 
       userName: newUser.userName, 
       email: newUser.email 
      }) 
     }) 

     dispatch(isAuthed(user.uid)) 
    } 
}

我導入此功能爲SignUpForm組件，獲取用戶信息，對一些<TextInput/>的。所以現在我想運行handleSignUp函數，但我不完全確定如何。

class SignUpForm extends Component { 
    static propTypes = { 

    } 
    state = { 
     email: '', 
     password: '', 
     username: '', 
     displayName: '' 
    } 
    handleSignUp() { 

     // Want to call handleAuthWithFirebase(this.state) here.  

    } 
    render() { 
     console.log(this.props); 
     return (
      <View style={{flex: 1}}> 
       <View> 
        <TextInput 
         style={styles.input} 
         onChangeText={(email) => this.setState({email})} 
         value={this.state.email} 
         autoCorrect={false} 
        /> 
        <TextInput 
         style={styles.input} 
         onChangeText={(password) => this.setState({password})} 
         value={this.state.password} 
         autoCorrect={false} 
        /> 
        <TextInput 
         style={styles.input} 
         onChangeText={(username) => this.setState({username})} 
         value={this.state.username} 
         autoCorrect={false} 
        /> 
        <TextInput 
         style={styles.input} 
         onChangeText={(displayName) => this.setState({displayName})} 
         value={this.state.displayName} 
         autoCorrect={false} 
        /> 
       </View> 
       <View> 
        <Button title="Sign Up" onPress={this.handleSignUp}>Sign Up</Button> 
       </View> 
      </View> 
     ) 
    } 
} 

export default connect()(SignUpForm)

它顯示我dispatch可作爲道具，當我console.log(this.props)

，但是當我嘗試在handleSignUp方法做this.props.dispatch(handleAuthWithFirebase(this.state))我得到道具的錯誤undefined

來源

2017-01-10 maxwellgover

這是因爲你的回調有一個自己的範圍，因爲它是一個命名函數。只需將它綁定在你的按鈕，像這樣：

<Button title="Sign Up" onPress={this.handleSignUp.bind(this)}>Sign Up</Button>

這樣做的原因是，從不同的上下文中調用時，除非你明確的功能結合到一定this功能範圍的變化。你需要這些才能訪問道具。除此之外，你的代碼看起來很好，但是如果你在解決問題時遇到麻煩，請告訴我。

來源

2017-01-10 07:10:50 martinarroyo

當您將組件連接到商店時dispatch將作爲道具傳遞給您的組件。

在你handleSignUp你可以做到以下幾點： -

handleSignUp() { 
    const {dispatch} = this.props 
    //input validations 
    const newUser = this.state 
    dispatch(handleAuthWithFirebase(newUser)) 

    }

也爲您的按鈕，你需要綁定this。這個你可以在按鈕做

<Button title="Sign Up" onPress={this.handleSignUp.bind(this)}>Sign Up</Button>

或在構造

constructor(){ 
    super() 
    this.this.handleSignUp = this.handleSignUp.bind(this) 
}

來源

2017-01-10 07:13:04

在React Native Redux中調度導入的函數

回答

相關問題