undefined не является объектом (оценивается как action.routeName) при использовании React-Navigation и Redux для React-Native App

Question

Я получаю следующую ошибку (изложенную выше и отмеченную на скриншоте здесь ) для приложения React Native.Я внедряю реактивную навигацию в редуксе.

Я также еще не добавил ни одного перенаправления в приложение.Я планирую вызвать NavigationActions для перенаправления на экран входа в систему на основе статуса LoggedIn, который настраивается отдельным редуктором, который управляет состоянием для пользователя.

Приложение работало правильно, когда у меня не было избыточности, управляющей состоянием навигации.Я решил перевести состояние навигации в избыточную, когда понял, что мне понадобятся некоторые перенаправления, основанные на статусе пользователя, вошедшего в систему, который управляется избыточностью.

Мой код выглядит следующим образом:

src / navigators / middleware.js

import {
  createNavigationPropConstructor,
  createReactNavigationReduxMiddleware,
} from 'react-navigation-redux-helpers';

// building redux utils for navigation
export const middleware = createReactNavigationReduxMiddleware(
  'root',
  state => state.nav,
);

export const navigationPropConstructor = createNavigationPropConstructor('root');

src / navigators / AppNavigator.js

import React from 'react';

import { StackNavigator } from 'react-navigation';
import Welcome from '../screens/Welcome';
import Dashboard from '../screens/Dashboard';
import Login from '../screens/Login';

routeNames = {
  Welcome: { screen: Welcome },
  Dashboard: { screen: Dashboard },
  Login: { screen: Login },
};

config = {
  navigationOptions: ({
    header: 'null',
    headerStyle: {
      backgroundColor: 'white',
      borderBottomWidth: 0,
    },
    headerLeft: null,
    headerTitleStyle: {
      fontSize: 30,
      fontFamily: 'Roboto-Bold',
    },
  }),
};

export const AppNavigator = StackNavigator(routeNames, config);

src / navigators / AppWithInternalState.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addNavigationHelpers } from 'react-navigation';
import { AppNavigator } from './AppNavigator';
import { initializeListeners } from 'react-navigation-redux-helpers';
import { navigationPropConstructor } from './middleware';

class AppWithInternalState extends React.Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
    nav: PropTypes.object.isRequired,
  };

  componentDidMount = () => {
    initializeListeners('root', this.props.nav);
  };

  render = () => {
    const { dispatch, nav } = this.props;
    const navigation = navigationPropConstructor(dispatch, nav);
    return <AppNavigator navigation={ navigation } />;
  };
}

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

export default connect(mapStateToProps)(AppWithInternalState);

src / redurs / navReducers

import { AppNavigator } from '../navigators/AppNavigator';
import { NavigationActions } from 'react-navigation';

const router = AppNavigator.router;

const firstAction = router.getActionForPathAndParams('Dashboard');
const tempNavState = router.getStateForAction(firstAction);

const secondAction = router.getActionForPathAndParams('Login');
const initialNavState = router.getStateForAction(secondAction, tempNavState);

export default navReducer = (state=initialNavState, action) => {
  let nextState;
  switch (action.type) {
    case 'Login':
      nextState = router.getStateForAction(
        NavigationActions.back(),
        state,
      );
      break;
    default:
      nextState = router.getStateForAction(action.state);
      break;
  }
};

Answer 1

Я смог решить это сам.Похоже, что есть проблема с реакцией навигации при использовании createNavigationPropConstructor.Это не будет решено до тех пор, пока не будет выпущен response-navigation@2.03.А пока создайте собственную навигационную опору:

import { createReduxBoundAddListener } from 'react-navigation-redux-helpers';

const navigation = {
  dispatch,
  state: nav,
  addListener: createReduxBoundAddListener('root'),
};

Вы можете увидеть и отследить проблему здесь: https://github.com/react-navigation/react-navigation/issues/4320