Отправка импортированной функции в 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)) 
    } 
} 

импортировать эту функцию в компонент 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)

, но когда я пытаюсь сделать this.props.dispatch(handleAuthWithFirebase(this.state)) в методе handleSignUp я получаю сообщение об ошибке, что подпирает является undefined

Answer 1

Это потому, что ваш обратный вызов имеет собственную область действия, так как это именованная функция. Просто связать его в кнопку, как это:

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

Причина этого заключается в том, что сфера применения функции изменяется, когда вызывается из другого контекста, если вы явно не связать функцию с определенной this. Это необходимо для доступа к реквизитам. Кроме того, ваш код выглядит хорошо, но дайте мне знать, если у вас возникнут проблемы, когда вы это исправите.

Answer 2

При подключении вашего компонента к вашему магазину 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) 
}