2017-12-22 16 views
0

私のリダクションアクションファイルからナビゲートしたい。 第1画面はログインしているので、ログインボタンをクリックすると、reducexアクション作成者が呼び出され、レデューサーが新しい状態を生成します。だから、アクションの後、私はダッシュボードにリダイレクトしたい。私はリビジョンアクションファイルからナビゲートするためのナビゲートナビゲーション

を使用しています

は+ネイティブ+の再来を反応させるナビゲーション

ログインコンポーネントファイル(LoginCmp.js)反応:

import React, { Component } from 'react'; 
import { 
    Text, 
    View, 
    ScrollView, 
    KeyboardAvoidingView 
} from 'react-native'; 
import { connect } from 'react-redux'; 
import { fieldChange, LoginAction } from '../../actions'; 
import { Button, Section, Input, Alert } from '../Helpers'; 

LoginAction(){ 
    const payload = { 
    email: this.props.email, 
    password: this.props.password 
    }; 
    this.props.LoginAction(payload); // Action call 
} 


render() { 
    return (
     <KeyboardAvoidingView 
    style={styles.container} 
    behavior="padding" 
     > 
     <View> 
    <ScrollView contentContainerStyle={styles.contentContainer}> 
     <Text style={styles.headerText}> Login </Text> 
     {this.alertMessage()} 
     <Section> 
     <Input 
      placeholder="[email protected]" 
      onChangeText={this.onFieldChange.bind(this, { actionType: 'EMAIL_CHANGED' })} 
      value={this.props.email} 
     /> 
     </Section> 
     <Section> 
     <Input 
      secureTextEntry 
      placeholder="Password" 
      onChangeText={this.onFieldChange.bind(this, { actionType: 'PASSWORD_CHANGED' })} 
      value={this.props.password} 
     /> 
     </Section> 
     <Section> 
     <Button 
      onPress={this.LoginAction.bind(this)} 
      style={styles.buttonLogin} 
     > 
      Submit 
     </Button> 
     </Section> 
    </ScrollView> 
     </View> 
     </KeyboardAvoidingView> 
    ); 
    } 
} 

const mapStateToProps = ({ auth }) => { 
    console.log(auth); 
    return auth; 
}; 

export default connect(mapStateToProps, { fieldChange, LoginAction })(LoginCmp); 

ルータファイル(Router.jsを):

const RouterComponent = StackNavigator({ 
    login: { screen: LoginCmp }, 
    dashboard: { screen: DashboardCmp }, 
}); 

アクションクリエータファイル(AuthActions.js):あなたは、あなたのナビゲーション状態が再来で開催され、そうでない場合、あなたは間違いなく反応し、ナビゲーションやReduxのを統合する必要があるかどうかを指定していない

import firebase from 'firebase'; 
import { NavigationActions } from 'react-navigation'; 


// Login actions 
export const LoginAction = (payload) => { 
    return (dispatch) => { 
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) 
     .then(user => loginSuccess(dispatch, user)) 
     .catch((error) => { 
    loginFail(dispatch, error); 
    }); 
    }; 
}; 

// Login success function 

logoutSuccess = (dispatch, user) => { 
// dispatch an action 
dispatch({ 
    type: 'LOGOUT_SUCCESS', 
    payload: user 
}); 
### From here i want to navigate to dashboard. 
}; 

答えて

0

反応ナビゲーションdocumentation on how to do itはかなり明確です。

その後、ナビゲーションはちょうど別発送となり、アクションのみが反応-ナビゲーションから来る:

dispatch(NavigationActions.navigate({ 
    routeName: 'dashboard', 
})); 
0
import firebase from 'firebase'; 
import { NavigationActions } from 'react-navigation'; 


// Login actions 
export const LoginAction = (payload) => { 
    return (dispatch) => { 
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password) 
     .then(user => loginSuccess(dispatch, user)) 
     .catch((error) => { 
    loginFail(dispatch, error); 
    }); 
    }; 
}; 

// Login success function 

logoutSuccess = (dispatch, user) => { 
    // dispatch an action 
    dispatch({ 
    type: 'LOGOUT_SUCCESS', 
    payload: user 
    }); 
    const navigateAction = NavigationActions.navigate({ 
     routeName: "dashboard", 
     params: {}, 
     action: NavigationActions.navigate({ routeName: "dashboard" }) 
    }); 
    this.props.navigation.dispatch(navigateAction); // this is where you use navigation prop 
}; 

//ルート減速

import Root from 'your navigation root path'; 

const navReducer = (state, action) => { 
    const newState = Root.router.getStateForAction(action, state) 
    return newState || state 
} 

export default navReducer; 
にこのNAVの減速を追加
関連する問題