Как использовать Redux с createSwitchNavigator? - PullRequest
Новая
       46

Как использовать Redux с createSwitchNavigator?

0 голосов
/ 15 октября 2018

Я пытаюсь использовать коммутатор навигатор с редуксом.Ниже приведен мой код. 

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 и использую его следующим образом для подключения к хранилищу ресурсов, но он дает мне ошибку, например, 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>
    );
  }
}

Я пытался следовать инструкции, приведенной ниже по ссылке, но все равно получаю ту же ошибку.

как я могу интегрировать избыточное хранилищереагировать на родной?

Может кто-нибудь сказать мне, что не так с моим кодом?

1 Ответ

0 голосов
/ 23 октября 2018

после слишком больших попыток я понял, что навигатор коммутатора не должен быть подключен к магазину, поэтому приведенный ниже шаг был неправильным. 

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

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

  export default connect(mapStateToProps)(AuthWithNavigationState);

Я просто экспортировал AuthNavigator и импортировал в приложение.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>
    );
  }
}
...