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

时可以作为道具使用

但是当我尝试在 handleSignUp 方法中执行 this.props.dispatch(handleAuthWithFirebase(this.state)) 时，我得到一个错误提示是 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

中做到这一点

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

或者在构造函数中

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

在 React Native Redux 中调度导入函数

Dispatching an imported function in React Native Redux

javascript

react-native

redux

react-redux