React Native Reduxでインポートされた関数をディスパッチする

Question

これは初めてReact Nativeを使用していて、簡単にReduxで作業しましたが、私はRedux/authentication.jsにFirebaseで新しいアカウントを作成するはずの機能を持っています。

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

私はいくつか<TextInput/>年代のユーザー情報を取得するSignUpFormコンポーネントにこの機能をインポートします。だから私は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) 

私console.log(this.props)

が、私がしようとするとhandleSignUp方法でthis.props.dispatch(handleAuthWithFirebase(this.state))を行うときに、私は小道具エラーを取得するにはundefined

とき dispatchが小道具として使用可能であることを私に示しています

Answer 1

これは、あなたのコールバックが独自のスコープを持っているからです。ただ、このようなあなたのボタンでそれをバインドします

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

この理由は、あなたが明示的に特定のthisに関数をバインドしない限り、異なるコンテキストから呼び出されたときに、関数の範囲が変化することです。あなたは小道具にアクセスするためにそれが必要です。それ以外のコードはうまく見えますが、それを修正するときに問題が発生した場合はお知らせください。

Answer 2

コンポーネントを店舗に接続すると、dispatchがコンポーネントに渡されます。で

ごhandleSignUpあなたが次の操作を行うことができます： -

あなたが thisをバインドする必要があなたのボタンについても

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

    } 

。これは、あなたは

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

またはコンストラクタのボタンで行うことができます

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