我如何通过反应导航访问 redux 商店? [英] How can i access to redux store with react navigation?

问题描述

我有应用程序音乐应用程序"供两个用户输入访客，已注册的用户"

I have App "Music App" for tow users type "Guest, a user registered"

我有一个底部导航器，当访客打开我的应用时，我只想呈现底部的 4 个标签主页、浏览、搜索、广播".

I have a bottom navigator for those, When Guest opens my app I want to render just 4 bottom tabs "Home, browse, search, radio".

但是当用户登录/注册时，我想呈现 5 个以前的标签以及库"标签.

but when user login/register I want to render 5 tabs previously tabs plus "Library" Tab.

所以

我在用户 register\login 时分派动作，并将 isLogin 状态从 false 更改为 true 并执行一些操作，例如添加一些其他数据放在我的抽屉里，看起来不错，

I dispatch action when user register\login, and change isLogin state from false to true and work some stuff like add some other data to my drawer and it appears fine tho,

我想访问 react-navigation 文件Tabs.js"中的 redux store，

I want to access to redux store inside react-navigation File "Tabs.js",

我想从 mapStateToProps 访问状态，但我无法从非类组件访问 this.props.isLogin！

I want to access state from mapStateToProps but I can't access this.props.isLogin from non-class component!

所以我不知道如果我不使用 Class 组件我该怎么做！

So I don't have any idea how can I do it if i don't use Class component!

那么有没有办法在 Tabs.js 文件中使用connect HOC"来访问 redux store?

So is there a way to access to redux store using "connect HOC" inside Tabs.js file?

代码

Tabs.js 文件

import {connect} from 'react-redux';
import {store} from '../redux/store/store';

const LoginTabs = createBottomTabNavigator({....}); // For user '5 tabs'

const notLoginTabs = createBottomTabNavigator({....}); // For Guest '4 tabs'



const App = this.props.isLogin ? LoginTabs : notLoginTabs; // Not work i know :P

export default (createAppContainer(App));

编辑 Drew Reese 的答案

当我尝试以这种方式执行此操作时，我收到了错误消息

EDIT For Drew Reese Answer

When I try to do it in this way I got under error message

const mapStateToProps = state => {
  console.log('state', state);
  return {
    isLogin: state.user.isLogin,
  };
};

const App = ({isLogin, ...props}) =>
  isLogin ? <LoginTabs {...props} /> : <NotLoginTabs {...props} />;
const Root = createAppContainer(App);

export default connect(mapStateToProps)(Root);

错误信息

这个导航器有导航和容器两种道具，所以它是不清楚它是否应该拥有自己的状态.删除道具:isLogin，dispatch" 如果导航器应该从导航中获取其状态支柱.如果导航器应该保持自己的状态，不要通过导航道具.

This navigator has both navigation and container props, so it is unclear if it should own its own state. Remove props: "isLogin, dispatch" if the navigator should get its state from the navigation prop. If the navigator should maintain its own state, do not pass a navigation prop.

我尝试了什么

我把所有的堆栈

抽屉、堆栈、底部标签"

"Drawer, Stacks, BottomTabs"

在一个文件类组件"中，它可以工作，但正如@Drew 所说，这样做不是一个好主意:)

inside One File "Class Component" and it's work but as @Drew say It's not a good idea to do it in this way :)

这是一个gist 文件，如果您想查看它

Here's a gist file if you want to see it

推荐答案

您需要创建动态路由，以及一个根据用户是否登录来呈现选项卡的组件.在 Tabs.js 中执行以下操作.

You need to create dynamic routes, and one component that renders tabs based on whether the user is logged in or not. in Tabs.js do the following.

const loginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  },
  Library: {
    screen: Library,
    navigationOptions: {
      title: 'Library',
    },
  },
}

const noLoginRoutes = {
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
    },
  },
  Browse: {
    screen: Browse,
    navigationOptions: {
      title: 'Browse',
    },
  },
  Search: {
    screen: Search,
    navigationOptions: {
      title: 'Search',
    },
  },
  Radio: {
    screen: Radio,
    navigationOptions: {
      title: 'Radio',
    },
  }
}

const mapStateToProps = state => {
  return {
    isLogin: state.user.isLogin,
 };
};


 const AppNav = ({ isLogin }) => {
  const Container = createAppContainer(
    createDrawerNavigator(
      {
        ...drawerRoutes,
        App: createStackNavigator(
          {
            ...routes,
            Tabs: createBottomTabNavigator(
              isLogin ? loginRoutes : noLoginRoutes
            ),
          },
          routesConfig
        ),
      },
      drawerConfig
    )
  );

  return <Container />;
};

export default connect(mapStateToProps)(AppNav);

演示

这篇关于我如何通过反应导航访问 redux 商店?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！