React-navigation zarządzanie Redux State

Question

uczę React Native i Redux i zacząłem przy użyciu bibliotek 3rd party - specjalnie React Navigation

I już po tutorial na niej Dan Parker's Medium Tutorial i nadal nie mogę dostać pracy

Moja RootContainer z aplikacji:

<PrimaryNavigation /> 
... 

export default connect(null, mapDispatchToProps)(RootContainer) 

definicja PrimaryNavigation:

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) 

Definicja

PrimaryNav:

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; 
} 

Moja stworzyć sklep:

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

return configureStore(rootReducer, rootSaga) 

pojawia się błąd wzdłuż linii:

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'

Moje zrozumienie tak daleko jest:

• RootContainer jest podłączony do sklepu - to trzyma PrimaryNavigation
• PrimaryNavigation zawiera Navigator (PrimaryNav), owija Żeglarz i przekazuje go stan
• PrimaryNav jest rzeczywista Navigator - Mam zdefiniowane trasy i domyślne inicjacji
• reduktor, który obsługuje PrimaryNav tylko PrimaryNav.router.getStateForAction

Am I brakuje stanu początkowego? Czy nie podłączam go poprawnie do Redux? Czy muszę zwolnić wysyłkę, aby przejść do pierwszego ekranu?

Dzięki

Answer 1

myślę, że brakuje kilku rzeczy w organizacji kodu.

To jest mój wysiłek, aby przedłużyć aplikację notetaker github wykonaną przez Tyler Mcginnis. Zaktualizowałem kod, aby obsługiwał najnowsze wersje React i React Native, a także rozszerzyłem aplikację, aby korzystać z nawigacji reagowania obsługującej zarówno system iOS, jak i Android. Dodałem Redux do zarządzania sklepem i użyłem Redux-Sagas do obsługi asynchronicznego pobierania danych.

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

Answer 2

można zobaczyć pełną wersję demo z moim git: https://github.com/liuxiaocong/redux-with-react-navigation użytkowania Redux i reagować nawigacji z reagują-rodzimy