React-navigation Redux 状态管理答案

【问题标题】：React-navigation Redux State managementReact-navigation Redux 状态管理
【发布时间】：2017-08-28 09:52:47
【问题描述】：

我正在学习 React Native 和 Redux，并且我已经开始使用 3rd 方库 - 特别是 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 包含一个 Navigator (PrimaryNav)，它包装 Navigator 并传递它的状态
PrimaryNav 是实际的导航器 - 我已经定义了路由和默认初始化
处理PrimaryNav的reducer就是PrimaryNav.router.getStateForAction

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

谢谢

【问题讨论】：

你需要PrimaryNav吗？它以undefined 的形式返回，所以我猜它是您的组件的简单要求失败
对于任何对在 react native 中集成 react-navigation 和 redux 的最新解决方案（截至目前）感兴趣的人，我在这里发布了一个答案：stackoverflow.com/questions/53894358/…。它可能会有所帮助。干杯

标签： react-native redux react-redux react-navigation

【解决方案1】：

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

【讨论】：

对于任何对在 react native 中集成 react-navigation 和 redux 的最新解决方案（截至目前）感兴趣的人，我在这里发布了一个答案：stackoverflow.com/questions/53894358/…。它可能会有所帮助。干杯

【解决方案2】：

我认为您在代码组织中遗漏了一些东西。

这是我为扩展 Tyler Mcginnis 所做的 github notetaker 应用所做的努力。我更新了代码以支持最新版本的 React 和 React Native，我还扩展了应用程序以使用支持 iOS 和 Android 的 react-navigation。我添加了 Redux 来管理存储，并使用 Redux-Sagas 来处理数据的异步获取。

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

【讨论】：