0

I'm trying to implement redux and navigation within a react native application, so I'm trying to follow the instructions for react-native-redux-helpers (here).

I seem to have been able to reach the Root class instantiation without any issues, but receive an error when the component attempts to load:

Error at ExpoRootComponent (Seemingly at Root class instantiation)

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('root', state => state.nav);

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

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

const AppWithNavigationState = connect(mapStateToProps)(App);

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

class Root extends React.Component {
  render() {
        return (
              <Provider store={store}>
                    <AppWithNavigationState />
              </Provider>
        )
  }
}
nick.cook
  • 2,071
  • 4
  • 18
  • 36
  • Possible duplicate of [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) – nick.cook Jan 13 '19 at 19:18

1 Answers1

1

you need to export your class like this;

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

Edit: Also you need to change your combine reducer;

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

So in your mapStateToProps, you can use state:state.nav

sdkcy
  • 3,528
  • 1
  • 16
  • 23
  • Never considered this. Not present in the docs for react-navigation-redux-helpers for some reason. Although I now get a new error saying 'undefined is not an object (evaluating state.routes) at the connect() method. – nick.cook Jan 13 '19 at 19:01
  • for your new issue, i think you can fix with edited version of my answer. – sdkcy Jan 14 '19 at 12:18