React native 将react native Navigator与redux一起用于有状态路由和无状态路由

所以我开始在Navigator中支持redux应用程序状态，这很好。这使您可以灵活地根据操作更改状态，例如：getSessionToken令牌不存在更改状态以开始演练如果令牌无效，请将其转到loginState。然而，当您想要的页面不是有状态的或不依赖于redux上的操作时，这就成了一个问题。例如，在登录页面上，您有一个指向注册页面的链接，并使用此.props.navigator.push（）和下面发布的代码。这将起作用，但问题在于，当您使用此.props.navigator.push，然后尝试执行有状态操作时<代码>路由。组件似乎持续存在，并且永远不会被丢弃。。这意味着永远不能命中有状态路由，因为route.component仍然保留一个值。我想知道是否有人想出了解决这个问题的办法？或者对如何改进代码有什么想法

'use strict';

import React from 'react-native'
let {Navigator,View} = React

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux/native';
import {Map} from 'immutable';

/**
* Components
**/
import LoginContainer from './LoginContainer'
import MatchContainer from './MatchContainer'
import WalkthroughContainer from './WalkthroughContainer'

/**
* Actions
**/
import * as authActions from '../reducers/auth/authActions';
import * as globalActions from '../reducers/global/globalActions';
const actions = [authActions, globalActions]

// Save that state
function mapStateToProps(state) {
  return {
    ...state
  };
};

/**
* Bind all the functions from `actions` and bind them with `dispatch`
**/
function mapDispatchToProps(dispatch) {
  const creators = Map()
    .merge(...actions)
    .filter(value => typeof value === 'function')
    .toObject();

  return {
    actions: bindActionCreators(creators, dispatch),
    dispatch
  };
}

/**
* App Class
**/
let styles = StyleSheet.create({
  navigator: {
    flex: 1
  }
});

let App = React.createClass({
  getInitialState() {
    return {
      currentRoute: null,
    }
  },

  /**
  * change the route to match the current redux state
  **/
  componentWillReceiveProps(props) {
    this.setState({
      currentRoute: props.auth.form.state
    });
  },

  componentDidMount() {
    this.props.actions.getSessionToken();
  },

  renderScene(route, navigator) {
    // This part is buggy
    if (route && route.component) {
      let Component = route.component;
      return (
        <Component navigator={navigator} />
      )
    }

    switch (this.state.currentRoute) {
      case 'LOGIN_STATE_LOGOUT':
        return <MatchContainer navigator={navigator} />
      case 'LOGIN_STATE_LOGIN':
        return <LoginContainer navigator={navigator} />
      case 'LOGIN_STATE_REGISTER':
        return <RegisterContainer navigator={navigator} />
      case 'WALKTHROUGH_STATE_START':
        return <WalkthroughContainer navigator={navigator} />
      default:
        return <View />
    }
  },

  render() {

    return (
      <Navigator
        style={styles.navigator}
        renderScene={this.renderScene}
        initialRoute={{ route: this.state.currentRoute }}
        configureScene={(route) => {
          if (route.sceneConfig) {
            return route.sceneConfig;
          }

          return Navigator.SceneConfigs.FloatFromBottomAndroid;
        }} />
    )

  }
});

export default connect(mapStateToProps, mapDispatchToProps)(App);

“严格使用”；
从“反应本机”导入反应
让{Navigator，View}=React
从“redux”导入{bindActionCreators}；
从'react redux/native'导入{connect}；
从“不可变”导入{Map}；
/**
*组成部分
**/
从“./LoginContainer”导入LoginContainer
从“./MatchContainer”导入MatchContainer
从“./walkthrowhcontainer”导入演练容器
/**
*行动
**/
从“../reducers/auth/authActions”导入*作为authActions；
从“../reducers/global/globalaactions”导入*作为globalaactions；
常量操作=[authActions，globalActions]
//拯救那个国家
函数MapStateTops（状态）{
返回{
…州
};
};
/**
*从'actions'绑定所有函数，并用'dispatch'绑定它们`
**/
功能图DispatchToprops（调度）{
const creators=Map（）
.merge（…操作）
.filter（值=>typeof值=='function'）
.toObject（）；
返回{
操作：bindActionCreators（创建者、调度），
派遣
};
}
/**
*应用程序类
**/
让styles=StyleSheet.create({
导航器：{
弹性：1
}
});
让App=React.createClass({
getInitialState（）{
返回{
currentRoute:null，
}
},
/**
*更改路由以匹配当前的redux状态
**/
组件将接收道具（道具）{
这是我的国家({
当前路径：props.auth.form.state
});
},
componentDidMount（）{
this.props.actions.getSessionToken（）；
},
renderScene（路线、导航器）{
//这部分是马车
if（路由和路由组件）{
让组件=route.Component；
返回(
)
}
开关（this.state.currentRoute）{
案例“登录\状态\注销”：
返回
案例“登录\状态\登录”：
返回
案例“登录\状态\注册表”：
返回
案例“演练\状态\开始”：
返回
违约：
返回
}
},
render（）{
返回(
{
if（路由场景图）{
返回路线.sceneConfig；
}
返回Navigator.sceneconfig.FloatFromBottomAndroid；
}} />
)
}
});
导出默认连接（mapStateToProps、mapDispatchToProps）（应用程序）；