React NativeとReduxとSagas/Thunksのナビゲーションを扱う場所はどこですか？

Question

私は副作用に基づいてアプリケーションを動的にナビゲートする方法についていくつか意見を出したいと思います。

例：
LoginScreen - ユーザーは電子メール/ pwを入力して送信します。私は副作用を処理するためにSagasを使用しているので、ユーザーがapiから正常に認証され、それに応じてReduxストアが更新されると、ユーザーをHomeScreenに進めたいと思う。

解決策1：
Reduxに関連するリアクションナビゲーションでは、私のログイン要求/応答を処理する私のSagaからのナビゲーション呼び出しをディスパッチできます。これは最も簡単なようですが、コンポーネントやサガなどにナビゲーションが広がってしまうこともあります。

解決方法2：
すべてのナビゲーションコールはコンポーネントレベルで、それに応じて反応し、ユーザオブジェクトに基づいて前方にナビゲートする。

React Native with Reduxとミドルウェア（SagasまたはThunks）でこれを処理するためのパターンまたはベストプラクティスはありますか？

Answer 1

現在はサンクでこれを行っていますが、それはすべてloginStateの設定方法に依存しています。

私のloginStateは次のようになっています。

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

これは、https://gist.github.com/iRoachie/7b6d5f33d9c9c8385f6f47822e7cea2fのように見えます。

ログインが成功したら、私はauthenticated: trueをレデューサーに設定しました。次に、reduxに接続しているログイン画面で、componentDidUpdateを使用してauthenticated === trueかどうかを確認し、メイン画面に移動します。

if (this.props.loginState.authenthicated === true) { 
    this.props.navigation.dispatch(
    NavigationActions.reset({ 
     index: 0, 
     actions: [NavigationActions.navigate({ routeName: 'Main' })], 
    }) 
) 
} 

私は常にローディング画面を管理するために使用しますが、基本的にはそれです。

Answer 2

カプセル化コンポーネントで認証を処理する方がしばしば簡単です。たとえば、あなたのルートで：

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

Authコンポーネントは、現在の状態から適切authenticatedプロパティを設定するために、あなたのReduxのストアに接続することになります。

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

は、その後、あなたのAuthコンポーネントは次のようになります。

これは、ナビゲートについて心配する必要がないので、多くの利点があります。また、深いURLからアプリケーションを読み込むユーザー（例：/something/else、/）だけでなく、ユーザーが正常に認証されると関連するルートが自動的に表示されるようサポートすることも簡単です。