Question

我正在使用连接到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（）函数中的dispatch函数，我认为需要将Instagram令牌发送到符合Redux的状态。在这里访问调度的最佳方式是什么？

谢谢！

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

看看它是否有帮助。让我知道。

使用与Redux的React Native Linking - 访问调度

1 个答案: