Utilisation de React Native Linking avec Redux - accès à l'envoi

Question

Je travaille sur une application React Native qui se connecte à l'API Instagram. Je suis en train d'échanger le jeton OAuth contre un jeton d'accès nécessaire pour l'API Instagram, et la dernière étape consiste à enregistrer le jeton d'accès dans la base de données, ce que je crois préférable en utilisant Redux via une fonction de dispatch.

Voici mon code:

Composant:

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 
}; 

je reçois de nouveau jeton d'accès, ce qui est génial. L'application est ouverte à partir de SafariView parce que mon serveur de noeud redirige l'utilisateur vers l'application en utilisant une liaison profonde (qui est ce à quoi sert la bibliothèque de liens - partie de React Native). Mais j'ai 2 questions:

1. Est-il acceptable que j'utilise la fonctionnalité React Native Linking dans mon service social? Tous les exemples que je vois en ligne sont avec le lien étant utilisé dans le composant.

2. Je ne peux pas accéder à la fonction d'envoi dans la fonction handleUrl(), que je suppose nécessaire pour envoyer le jeton Instagram à l'état pour se conformer à Redux. Quel est le meilleur moyen d'accéder à l'expédition ici?

Merci!

Answer 1

1. je ne vois aucun problème ici, mais plutôt que de mettre en œuvre vous-même, vous devriez regarder ce repo sur GitHub, ou vous pouvez trouver plus de référentiels disponibles sur le moyeu Git.
2. Pour accéder à l'envoi partout, vous pouvez mapper l'envoi aux accessoires.

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)

voir si ça aide. Faites le moi savoir.