変更ルートは、ルータは、非同期アクション

Question

後、私はそうのようないくつかのルートを設定しているリアクト：

import createHistory from 'history/createMemoryHistory'; 
import { NativeRouter, Route } from 'react-router-native'; 

<NativeRouter history={createHistory()}> 
    <View style={styles.container}> 
    <Route exact path='/' component={Home}/> 
    <Route path='/page1' component={Page1}/> 
    </View> 
</NativeRouter> 

は、今では例えば私のHomeクラスでプログラムのルートを変更するには簡単です：

this.props.history.push('/page1'); 

しかし、私はReduxので派遣しています非同期アクションの場合：

export function login(email, password) { 

    return function(dispatch) { 

     dispatch(setAuthBusy(true)); 

     return auth.signIn(email, password) 
     .then(function (user) { 
      dispatch(setAuthBusy(false)); 
      dispatch(setUser(user)); 

      // !CHANGE ROUTE HERE! 

     }) 
     .catch(function (err) { 
      dispatch(setAuthBusy(false)); 
      dispatch(setAuthError(err.message)); 
     }); 
    }; 

} 

この場合、ユーザーを認証するログインアクションであることがわかります。ユーザーが正常に認証された場合にのみ、ルートが/page1に変更されます。

あなたの非同期アクションのルートを変更することは正しい方法ではないので、アプリケーションの一般的なアーキテクチャーとフローに関してアドバイスをいただきたいと思います。ありがとう！

Answer 1

非同期アクションに対処するには、redux-thunkミドルウェアを参照する必要があります。

class Home extends React.Component { 

    this.onLogin =() => { 
    dispatch(login('toto', 'toto')).then(() => { 
     this.props.history.push('/page1'); 
    }) 
    } 

} 

これはあなたのケースでのルート変更は、コンポーネント自身が管理することができることを意味：あなたは次のことを行うことができredux-thunkを使用して

。

希望します。