在 React Native Redux 中调度导入的函数答案

【问题标题】：Dispatching an imported function in React Native Redux在 React Native Redux 中调度导入的函数
【发布时间】：2017-01-10 01:11:41
【问题描述】：

这是我第一次使用 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)

当我console.log(this.props) 时，它告诉我dispatch 可以作为道具使用

但是当我尝试在 handleSignUp 方法中执行 this.props.dispatch(handleAuthWithFirebase(this.state)) 时，我收到一个错误，即 props 是 undefined

【问题讨论】：

标签： javascript react-native redux react-redux

【解决方案1】：

这是因为你的回调有它自己的范围，因为它是一个命名函数。只需像这样将其绑定在您的按钮中：

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

这样做的原因是函数的范围在从不同的上下文调用时会发生变化，除非您将函数显式绑定到某个this。您需要它才能访问道具。除此之外，您的代码看起来不错，但如果您在修复它时遇到任何问题，请告诉我。

【讨论】：

【解决方案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)
}

【讨论】：