Redux Relational Navigation Management

Question

I am learning React Native and Redux, and I started using third-party libraries - specifically React Navigation

I followed the tutorial on this subject Dan Parker Middle Guide , and I still can't get it to work

My RootContainer application:

<PrimaryNavigation /> ... export default connect(null, mapDispatchToProps)(RootContainer) 

Primary navigation 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 message:

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'

So far I understand:

• RootContainer is connected to the repository - it contains PrimaryNavigation
• PrimaryNavigation contains a navigator (PrimaryNav), it wraps the navigator and passes its state
• PrimaryNav is the actual Navigator - I defined default routes and initializations
• the reducer that handles PrimaryNav is only PrimaryNav.router.getStateForAction

Am I missing an initial state? I do not connect it to Redux correctly? Do I need to disable sending in order to go to the first screen?

thanks

Answer 1

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

It is my effort to extend the github notetaker app made by Tyler McGinnis. I updated the code to support the latest versions of React and React Native, I also expanded the application to use interactive navigation that supports both iOS and Android. I added Redux for storage management and used Redux-Sagas to handle asynchronous data fetching.

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

Answer 2

you can see the full demo from my git: https://github.com/liuxiaocong/redux-with-react-navigation using abbreviations and react-navigation from react