如何将 Redux 与 createSwitchNavigator 一起使用？答案

【问题标题】：how to use Redux with createSwitchNavigator?如何将 Redux 与 createSwitchNavigator 一起使用？
【发布时间】：2018-10-15 07:13:53
【问题描述】：

我正在尝试将 switch navigator 与 redux 一起使用。以下是我的代码。

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)

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

我尝试按照以下链接中的说明进行操作，但仍然遇到同样的错误。

how can i integrate redux store to react native?

谁能告诉我我的代码有什么问题？

【问题讨论】：

标签： react-native redux navigation state-management

【解决方案1】：

经过太多尝试，我发现，开关导航器不需要连接到商店，所以下面的步骤是不正确的。

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

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

  export default connect(mapStateToProps)(AuthWithNavigationState);

我只是导出 AuthNavigator 并导入 App.js，这对我有用。

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

【讨论】：