react-native - react 导航以从 redux 操作文件中导航

Question

我想从我的减少操作文件中导航。
第一个屏幕是登录，因此单击登录按钮后将调用 redux action creator 和 reducer 生成新状态。因此，在操作之后，我想重新定向到我的仪表板。

我在用

react 原生 + redux + react 导航

登录组件文件( 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 },
});

Action 创建者文件( 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 日
在 react-navigation 的主要重写之后，不鼓励与 Redux 集成。但是，有一些新工具可让您从任何地方控制导航。例如，参见 how to create a NavigationService提供此功能
不再有效 - 不要这样做
你还没有指定你的导航状态是否在 Redux 中，所以如果没有，你绝对应该集成 react-navigation 和 Redux。
react 导航 documentation on how to do it很清楚。
之后，navigating 就变成了另一个 dispatch，只有 action 来自 react-navigation:

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