React-navigation Redux 状态管理

React-navigation Redux State management

我正在学习 React Native 和 Redux，并且我已经开始使用 3rd 方库 - 特别是 React Navigation

我已经按照 Dan Parker 的 Medium Tutorial 上的教程进行了操作，但仍然无法正常工作

我的应用程序的RootContainer：

1
2
3
4

<PrimaryNavigation />
...

export default connect(null, mapDispatchToProps)(RootContainer)

PrimaryNavigation 定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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 定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

我的创建商店：

1
2
3
4
5
6

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

return configureStore(rootReducer, rootSaga)

我收到如下错误：

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'

目前我的理解是：

RootContainer 连接到一个商店——它拥有一个 PrimaryNavigation
PrimaryNavigation 包含一个 Navigator (PrimaryNav)，它package Navigator 并传递它的状态
PrimaryNav 是实际的导航器 - 我已经定义了路线和默认初始化
处理 PrimaryNav 的减速器只是 PrimaryNav.router.getStateForAction

我是否缺少初始状态？我没有将它正确连接到 Redux 吗？我是否需要触发调度才能进入第一个屏幕？

谢谢