React-navigation Redux State管理

时间:2017-04-03 13:40:16

标签: react-native redux react-redux react-navigation

我正在学习React Native和Redux,并且我开始使用第三方库 - 特别是React Navigation

我已经按照它上面的教程Dan Parker's Medium Tutorial进行了操作

我的应用程序的RootContainer:

<PrimaryNavigation />
...

export default connect(null, mapDispatchToProps)(RootContainer)

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)

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

我的创建商店:

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包含导航器(PrimaryNav),它包装导航器并将其传递状态
  • PrimaryNav是实际的导航器 - 我已经定义了路由和默认初始化
  • 处理PrimaryNav的reducer只是PrimaryNav.router.getStateForAction

我错过了初始状态吗?我没有正确地将它连接到Redux吗?我是否需要启动调度才能转到第一个屏幕?

由于

2 个答案:

答案 0 :(得分:1)

我认为您在代码组织中缺少一些东西。

这是我努力扩展由Tyler Mcginnis完成的github notetaker应用程序。我更新了代码以支持最新版本的React和React Native,我还扩展了应用程序以使用支持iOS和Android的react-navigation。我添加了Redux来管理商店并使用Redux-Sagas来处理数据的异步提取。

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

答案 1 :(得分:0)

你可以从我的git看到完整的演示:https://github.com/liuxiaocong/redux-with-react-navigation 使用来自react-native的redux和react-navigation