使用 Redux 反应原生导航：react-navigation-redux-helpers - '未定义不是对象（评估 state.routes）'答案

【问题标题】：React Native Navigation with Redux: react-navigation-redux-helpers - 'undefined is not an object (evaluation state.routes)'使用 Redux 反应原生导航：react-navigation-redux-helpers - '未定义不是对象（评估 state.routes）'
【发布时间】：2019-01-13 19:22:57
【问题描述】：

我正在尝试在 react 本机应用程序中实现 redux 和导航，因此我正在尝试按照 react-native-redux-helpers (here) 的说明进行操作。

但是，我在尝试启动应用程序时收到以下错误：

App.js：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import rootReducer from './src/reducers/index';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { reduxifyNavigator, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';

import LoginScreen from './src/screens/LoginScreen';
import NotesScreen from './src/screens/NotesScreen';

const AppNavigator = createStackNavigator({
  Login: {
        screen: LoginScreen
  },
  Notes: {
        screen: NotesScreen
  }
})

const navReducer = createNavigationReducer(AppNavigator);

const appReducer = combineReducers({
  rootReducer,
  navReducer
})

const middleware = createReactNavigationReduxMiddleware('Login', state => state.nav);

const App = reduxifyNavigator(AppNavigator, 'Login');

const mapStateToProps = state => ({
  state: state.nav
})

const AppWithNavigationState = connect(mapStateToProps)(App);

const store = createStore(appReducer, applyMiddleware(middleware));

export default class Root extends React.Component {
  render() {
        return (
              <Provider store={store}>
                    <AppWithNavigationState />
              </Provider>
        )
  }
}

【问题讨论】：

您找到解决方案了吗？我面临同样的错误，但仍然没有运气。

标签： reactjs react-native redux react-redux react-native-navigation

【解决方案1】：

尝试按照文档中的说明实现您的代码，甚至包括名称。它确实应该有效，在您的情况下如下：


    //delete
import { reduxifyNavigator, ...} from 'react-navigation-redux-helpers';
//add 
import { createReduxContainer } from 'react-navigation-redux-helpers';

const AppNavigator = createStackNavigator({
    Login: {
          screen: LoginScreen
    },
    Notes: {
          screen: NotesScreen
    }
  })

  const navReducer = createNavigationReducer(AppNavigator);

  const appReducer = combineReducers({
    rootReducer,
    nav : navReducer
  })

  const middleware = createReactNavigationReduxMiddleware(state => state.nav);

  const App = createReduxContainer(AppNavigator);

  const mapStateToProps = state => ({
    state: state.nav
  })

  const AppWithNavigationState = connect(mapStateToProps)(App);

  const store = createStore(appReducer, applyMiddleware(middleware));

  export default class Root extends React.Component {
    render() {
          return (
                <Provider store={store}>
                      <AppWithNavigationState />
                </Provider>
          )
    }
  }

【讨论】：