Реагируй на родную навигацию v3 с редуксом - PullRequest
Новая
       60

Реагируй на родную навигацию v3 с редуксом

0 голосов
/ 19 декабря 2018

Я пытаюсь настроить реагировать навигацию v3 с избыточностью.В документации по реагированию на навигацию я могу успешно настроить навигацию, и она прекрасно работает без добавления избыточности.Тем не менее, когда я пытаюсь добавить свой редукс class App extends React.Component{...} и подключить свои действия, он выдает следующую ошибку:

Инвариантное нарушение: Инвариантное нарушение: Не удалось найти «store» в контексте «Connect (AuthScreen)»».Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React в Connect (AuthScreen) в параметрах подключения.

App.js 

const MainNavigator = createBottomTabNavigator({
  welcome: { screen: WelcomeScreen },
  auth: { screen: AuthScreen },
  main: {
    screen: createBottomTabNavigator({
      map: { screen: MapScreen },
      deck: { screen: DeckScreen },
      review: {
        screen: createStackNavigator({
          review: { screen: ReviewScreen },
          settings: { screen: SettingsScreen }
        }) 
      }
    })
  }
});

const AppContainer = createAppContainer(MainNavigator);

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


export default AppContainer;

Здесьмой AuthScreen, к которому я хочу подключить избыточный код: 

class AuthScreen extends Component {
    componentDidMount(){
        console.log('This is this.props in AuthScreen:')
        console.log(this.props);
        this.props.facebookLogin();
    }
    render(){
        return(
            <View>
                <Text>AuthScreen</Text>
            </View>
        )
    }
}

export default connect(null, actions)(AuthScreen);

Я подозреваю, что мне не разрешено оборачивать теги <Provider> вокруг контейнера приложения следующим образом, может кто-нибудь дать некоторое представление о том, как это можно сделать

Ответы [ 2 ]

0 голосов
/ 28 февраля 2019

Вот простой пример для начала работы с React Navigation 3.x и Redux:

App.js 

import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';

import Reducers from './src/Reducers';

import Preload from './src/screens/Preload';

let store = createStore(Reducers);

const AppNavigator = createStackNavigator({
  Preload: {
    screen: Preload,
  },
});

const AppContainer = createAppContainer(AppNavigator);

export default class App extends Component {
  render () {
    return (
        <Provider store={store}>
          <AppContainer/>
        </Provider>
    )
  }
}
0 голосов
/ 19 декабря 2018

Итак, я выложу то, что у меня есть, и, надеюсь, это поможет.У меня есть отдельный файл (AppNavigation.js), который обрабатывает всю навигацию для моего приложения.В этом AppNavigation у меня есть это: 

const RootNavigator = createStackNavigator({
  <Code here>
})

Мой RootNavigator находится внутри AppContainer 

const AppContainer = createAppContainer(RootNavigator)

Затем в моем классе я отображаю AppContainer. 

class AppNavigation extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <AppContainer screenProps={this.props} />
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation);

Затем в моем App.js я «подключаю» свой магазин к RootNavigator 

export default class App extends React.Component {

  render() {
    return (
      <Provider store={store}>
        <RootNavigator />
      </Provider>
    )
  }
}

Итак, короткая история: вы должны обернуть свой MainNavigator в свой тег Provider.

EDIT: 

const rootReducer = combineReducers({
  reducer1,
  reducer2,
  reducer3...,
})

export default createStore(
  rootReducer,
  undefined,
  applyMiddleware(...middleware)
)

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

...