如何在createSwitchNavigator中使用Redux? [英] how to use Redux with createSwitchNavigator?

问题描述

我正在尝试将开关导航器与redux一起使用.以下是我的代码.

I am trying to use switch navigator with redux. following is my code.

import { createSwitchNavigator, createStackNavigator } from 'react-navigation';
import LoginScreen from '../screens/LoginScreen';
import EmployeeListScreen from '../screens/EmployeeListScreen';
import DetailsView from '../screens/EmployeeDetailViewScreen';
import EmployeeForm from '../screens/EmployeeForm';
import AuthLoadingScreen from "../screens/AuthLoadingScreen.js";
import {connect  } from "react-redux";
import { AppNavigator } from "../navigations/AppNavigator.js";

const AppStack = createStackNavigator({ 
    List:{screen:EmployeeListScreen},
    Detail:{screen:DetailsView},
    Form:{screen:EmployeeForm}
 });
const AuthStack = createStackNavigator({ Login: LoginScreen });

export const AuthNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppNavigator,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

const AuthWithNavigationState = ({ dispatch, nav }) => (
    <AuthNavigator  />
  );

  const mapStateToProps = state => ({
    nav: state.nav,
  });

  export default connect(mapStateToProps)(AuthWithNavigationState);

我正在导入此组件是我的App.js文件，并按如下方式使用它与redux存储区连接，但它给我的错误是，未定义React，并且错误位于connect(AuthWithNavigationState)

I'm importing this component is my App.js file and using it as follows to connect with redux store but it is giving me error like, React is not defined and error is located at connect(AuthWithNavigationState)

import React from 'react';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware  } from 'redux';
import thunk from 'redux-thunk';
import AppReducer from './src/reducers/AppReducer';
import AuthWithNavigationState from './src/navigations/AuthNavigator.js';

const store = createStore(AppReducer,applyMiddleware(thunk));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AuthWithNavigationState/>
      </Provider>
    );
  }
}

我试图按照以下链接的说明进行操作，但仍然遇到相同的错误.

I've tried to follow instruction from below link but still I am getting the same error.

我如何集成redux存储以响应本机? /a>

how can i integrate redux store to react native?

有人可以告诉我我的代码有什么问题吗?

推荐答案

经过过多尝试，我发现，切换导航器不需要连接到商店，因此下面的步骤是不正确的.

after too much trying, I figure out that, The switch navigator don't need to be connect to the store, so below step was incorrect.

const AuthWithNavigationState = ({ dispatch, nav }) => (
    <AuthNavigator  />
  );

  const mapStateToProps = state => ({
    nav: state.nav,
  });

  export default connect(mapStateToProps)(AuthWithNavigationState);

我只是导出了AuthNavigator，然后将其导入了App.js，这对我有用.

I simply exported AuthNavigator and imported in App.js and this worked for me.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore,applyMiddleware  } from 'redux';
import thunk from 'redux-thunk';
import AppReducer from './src/reducers/AppReducer';
import AuthNavigatorfrom './src/navigations/AuthNavigator.js';

const store = createStore(AppReducer,applyMiddleware(thunk));

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AuthNavigator/>
      </Provider>
    );
  }
}

这篇关于如何在createSwitchNavigator中使用Redux?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！