使用 React Native Linking 和 Redux - 访问调度答案

【问题标题】：Using React Native Linking with Redux - accessing dispatch使用 React Native Linking 和 Redux - 访问调度
【发布时间】：2017-08-04 10:33:12
【问题描述】：

我正在开发一个连接到 Instagram API 的 React Native 应用程序。我正在经历将 OAuth 令牌交换为 Instagram API 所需的访问令牌的过程，最后一步是将访问令牌保存到数据库中，我认为最好通过调度函数使用 Redux 来完成。

这是我的代码：

组件：

render() {
    return (
        <View style={styles.container}>
            <Text>Connect to Instagram</Text>
            <Button
                onPress={this.props.authUserInstagram}
                title={'Connect to Instagram'}
            />
        </View>
    );
}

Social.service.js：

export const authUserInstagram = () => {
    return dispatch => {
        return SocialApi.authUser()
            .then(response => {
                SafariView.show({
                    url: response.url,
                    fromBottom: true
                });
                Linking.addEventListener('url', handleUrl);
            })
        };
};

const handleUrl = event => {
    //remove listener here as it makes sense rather than doing it in component
    Linking.removeEventListener('url', handleUrl);
    var url = new URL(event.url);
    const code = url.searchParams.get('token');
    const error = url.searchParams.get('error');
    SafariView.dismiss();
    //I wish to access dispatch here to save the token in the state
};

我确实找回了访问令牌，这很棒。该应用程序是从 SafariView 打开的，因为我的节点服务器使用深度链接将用户重定向回应用程序（这是使用链接库的用途 - React Native 的一部分）。但我有两个问题：

我可以在我的社交服务中使用 React Native Linking 功能吗？我在网上看到的所有示例都是组件中使用的链接。
我无法访问 handleUrl() 函数中的调度函数，我认为需要它来将 Instagram 令牌发送到状态以符合 Redux。在这里访问调度的最佳方式是什么？

谢谢！

【问题讨论】：

标签： api react-native redux deep-linking

【解决方案1】：

我在这里没有发现任何问题，但与其自行实施，不如在 github 上查看 repo，或者您可以在 Git hub 上找到更多可用的存储库。
为了在任何地方访问调度，您可以将调度映射到道具。

import { connect } from 'react-redux'
import LoginActions, { loggedInUser } from '../Redux/LoginRedux'

        type SignupScreenProps = {
         attemptSignup: () => void,
}

class SignupScreen extends React.Component {

props: SignupScreenProps
           
// your component logic

const handleUrl = event => {
    //remove listener here as it makes sense rather than doing it in component
    Linking.removeEventListener('url', handleUrl);
    var url = new URL(event.url);
    const code = url.searchParams.get('token');
    const error = url.searchParams.get('error');
    SafariView.dismiss();
    //this is how you can access.
    this.props.attemptSignup();
};

render() {
//button view

<Button
  onPress={this.props.authUserInstagram}
  title={'Connect to Instagram'}
/>
}

}

    const mapStateToProps = (state) => {
//access redux store here
return {
        dara.state
      }
    }

    const mapDispatchToProps = (dispatch) => {
        return {
          attemptSignup: (name, email, birthday, gender, avatar, password) => dispatch(LoginActions.signupRequest(name, email, birthday, gender, avatar, password))
        }
    }

    export default connect(mapStateToProps, mapDispatchToProps)(SignupScreen)

看看有没有帮助。让我知道。

【讨论】：