redux 조치 파일에서 탐색하기위한 탐색 탐색

Question

내 reducec 조치 파일에서 탐색하려고합니다. 첫 번째 화면은 로그인이므로 로그인 버튼을 클릭하면 redux 액션 크리에이터를 호출하고 감속기가 새 상태를 생성합니다. 그래서 액션 후에 나는 대시 보드로 리다이렉트하고 싶다.

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@gmail.com" 
      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 : 나는

을 사용하고

는 기본 +의 REDUX + 네비게이션을

로그인 구성 요소 파일 (LoginCmp.js)를 반응 반응) :

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

액션 만든 파일 (AuthActions.js) : 당신은 당신의 탐색 상태가 돌아 오는 개최, 그래서하지 않을 경우, 당신은 확실히 반응-탐색하고 돌아 오는을 통합할지 여부를 지정하지 않은

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

Answer 1

.

반응 탐색 documentation on how to do it는 분명합니다. 그 후

는 탐색 만 행동 반응 네비게이션에서 온 또 다른 파견된다 :

dispatch(NavigationActions.navigate({ 
    routeName: 'dashboard', 
})); 

Answer 2

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;