React-navigation Redux State management

Question

I'm learning React Native and Redux and I've started using 3rd party libraries - specifically React Navigation

I've followed a tutorial on it Dan Parker's Medium Tutorial and I still can't get it working

My RootContainer of the app:

<PrimaryNavigation />
...

export default connect(null, mapDispatchToProps)(RootContainer)

PrimaryNavigation definition:

const mapStateToProps = (state) => {
  return {
    navigationState: state.primaryNav
  }
}

class PrimaryNavigation extends React.Component {
  render() {
    return (
      <PrimaryNav
        navigation={
          addNavigationHelpers({
            dispatch: this.props.dispatch,
            state: this.props.navigationState
          })
        }
      />
    )
  }
}

export default connect(mapStateToProps)(PrimaryNavigation)

PrimaryNav definition:

const routeConfiguration = {
  LoginScreen: {
    screen: LoginScreen
  },
  MainContainer: {
    screen: MainContainer
  }
}

const PrimaryNav = StackNavigator(
  routeConfiguration,
  {
    headerMode: 'none'
  })

export default PrimaryNav

export const reducer = (state, action) => {
  const newState = PrimaryNav.router.getStateForAction(action,state)
  return newState || state;
}

My create store:

const rootReducer = combineReducers({
  ...
  primaryNav: require('../Navigation/AppNavigation').reducer
})

return configureStore(rootReducer, rootSaga)

I get an error along the lines of:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'PrimaryNavigation'

My understanding so far is:

• RootContainer is connected to a store - it holds a PrimaryNavigation
• PrimaryNavigation contains a Navigator (PrimaryNav), it wraps the Navigator and passes it state
• PrimaryNav is the actual Navigator - I've defined routes and default initializations
• the reducer that handles PrimaryNav is just PrimaryNav.router.getStateForAction

Am I missing initial state? Am I not connecting it to Redux properly? Do I need to fire off a dispatch to go to the first screen?

Thanks

Answer 1

I think you are missing a few things in your code organization.

This is my effort to extend the github notetaker app done by Tyler Mcginnis. I updated the code to support latest versions of React and React Native, I also extended the app to use react-navigation supporting both iOS and Android. I added Redux to manage the store and used Redux-Sagas to handle asynchronous fetch of data.

https://github.com/ahmedkamohamed/react-native-navigation-redux-sagas