Où gérer la navigation dans React Native avec Redux et Sagas/Thunks?

Question

Je voudrais obtenir quelques opinions sur la façon dont vous allez naviguer dynamiquement vos applications basées sur les effets secondaires.

Exemple:
LoginScreen - l'utilisateur saisit email/pw et soumet. J'utilise Sagas pour gérer mes effets secondaires, donc lorsque l'utilisateur est authentifié avec succès à partir de l'API et que mon magasin Redux est mis à jour en conséquence, je veux avancer mon utilisateur vers le HomeScreen. Avec React Navigation lié à Redux, je peux envoyer un appel de navigation à partir de ma Saga qui gère ma demande/réponse de connexion. Bien que cela semble plus facile, il semble aussi que cela pourrait sortir de la main d'avoir la propagation de la navigation à travers les composants et les sagas, etc.

Solution 2:
Conserver toute navigation appelle au niveau des composants et sur les mises à jour accessoiristes de Redux, réagir en conséquence et naviguer en fonction de l'objet utilisateur.

Existe-t-il des modèles ou des pratiques recommandées pour gérer cela dans React Native with Redux et middleware (Sagas ou Thunks)?

Answer 1

Actuellement, cela se fait avec des thunk, mais tout dépend de la façon dont vous configurez le loginState.

Mon identifiant de connexion ressemble à ceci.

interface LoginState { 
    authenthicated: boolean 
    logging: boolean 
    error: string 
    key: string 
} 

Connexion thunk semble regarder ce https://gist.github.com/iRoachie/7b6d5f33d9c9c8385f6f47822e7cea2f.

Si la connexion a réussi, alors j'ai mis le authenticated: true dans le réducteur. Puis sur mon écran de connexion qui est connecté à redux, j'utilise componentDidUpdate pour vérifier si authenticated === true, puis naviguez vers l'écran principal. Je l'utilise toujours pour gérer l'écran de chargement, mais c'est fondamentalement le cas.

Answer 2

Il est souvent plus facile de gérer l'authentification avec un composant d'encapsulation. Par exemple, dans vos itinéraires:

<Route path="/" component={Auth}> 
... 
</Route> 

Ensuite, votre composant Auth ressemblerait à quelque chose comme:

class Auth extends React.Component { 
    render() { 
    // Show children if user is authenticated 
    if (this.props.authenticated) { 
     return this.props.children; 
    } 

    // Show login component/screen if user is not authenticated 
    return (
     <Login/> 
    ); 
    } 
} 

Le composant Auth serait connecté à votre magasin Redux pour définir la propriété authenticated appropriée de l'état actuel .

Ceci présente un certain nombre d'avantages car vous n'avez pas à vous soucier de la navigation. Il est également facile de supporter l'utilisateur qui charge votre application à partir d'URLs profondes (par exemple /something/else, et pas seulement /) et l'itinéraire pertinent sera automatiquement affiché une fois que l'utilisateur a été authentifié avec succès.