反应导航以从Redux操作文件导航

Question

我想从我的减少动作文件中导航。第一个屏幕是登录屏幕，因此在单击登录按钮后将调用redux动作创建者，reduce生成新状态。因此，在执行该操作之后，我想重新调配到仪表板。

我在用

反应本机+ Redux +反应导航

登录组件文件（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@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）：

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

编辑：2018年8月9日

在对反应导航进行重大重写之后，不建议与Redux集成。但是，有一些新工具可让您从任何地方控制导航。例如，请参阅如何创建提供此功能的NavigationService

不再有效-请勿这样做

您尚未指定是否将导航状态保存在Redux中，因此，如果没有保留，则应该集成react-navigation和Redux。

有关如何执行此操作的反应导航文档非常清楚。

在那之后，导航变成另一个调度，只有动作来自于react-navigation：

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