Redux + React-Navigation:TypeError:无法读取未定义

时间:2018-01-24 15:05:16

标签: react-native redux react-navigation

我无法调试此错误。我正在将react-navigation的Stack Navigator与Redux集成,并且无法初始化Store。我有一个非常简单的结构。提前致谢

注册组件:

    const App = () => {    
      return (
        <Provider store={createStore(reducers)}>
          <AppWithNavigationState />
        </Provider>
      );
    };

Redux连接组件:

class AppWithNavigationState extends Component {
  render() {
    console.log('rendered AppWithNavigationState');

    return (
      <TopLevelRouter
        navigation={addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.nav
        })}
      />
    );
  }
}
const mapStateToProps = (state) => {
  return { nav: state.nav };
};

export default connect(mapStateToProps)(AppWithNavigationState);

StackNavigator:

const Routes = {
  Profile: { screen: ProfileScreen },
};

export const TopLevelRouter = StackNavigator(Routes);

和redurs:

export default combineReducers({
  nav: NavigationReducer,
  loggedIn: AuthReducer
});

const initialState = TopLevelRouter.router.getStateForAction(
  TopLevelRouter.router.getActionForPathAndParams('Profile'));


export default (state = initialState, action) => {
  const newState = TopLevelRouter.router.getStateForAction(state, action);
  return newState || state;
};

完整堆栈跟踪:

TypeError: Cannot read property 'undefined' of undefined

This error is located at:
    in App (at renderApplication.js:35)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:71)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:34)
Object.getStateForAction
\src\routers\StackRouter.js:158:40
exports.default
\src\reducers\NavigationReducer.js:19:41
<unknown>
\node_modules\redux\lib\combineReducers.js:53:23
assertReducerShape
\node_modules\redux\lib\combineReducers.js:51:24
combineReducers
\node_modules\redux\lib\combineReducers.js:107:4
<unknown>
\src\reducers\index.js:5:31
loadModuleImplementation
\node_modules\metro\src\lib\polyfills\require.js:213:4
guardedLoadModule
\node_modules\metro\src\lib\polyfills\require.js:147:11
_require
\node_modules\metro\src\lib\polyfills\require.js:131:2

1 个答案:

答案 0 :(得分:0)

React Navigation的redux集成在2018年1月底之后迅速发生变化。它现在有事件监听器要求,请参阅github示例。

我无法查明确切的错误,但我从头开始并遵循本指南取得了成功:https://medium.com/async-la/a-stately-guide-to-react-navigation-with-redux-1f90c872f96e

请注意,您必须向根导航路由器添加一个监听器,指南中未涉及