React native - аутентификация с помощью firebase с помощьюact-redux в App.js

Question

Я использую в своем приложении проверку подлинности Firebase и response-redux.Я добавил firebase.auth().onAuthStateChanged в функцию componentDidMount моего App.js, чтобы проверить статус входа пользователя в приложение.Я попытался подключить App.js к функции моих действий при редуксе getUserProfile следующим образом:

App.js

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'; 
import reducers from './app/src/reducers';
import ReduxThunk from 'redux-thunk';
import { connect } from 'react-redux';
import { firebase } from './config/config';
import { getUserProfile } from './app/src/actions/index';

...

const AppContainer = createAppContainer(MainStack);

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    var that = this;
    firebase.auth().onAuthStateChanged(async function(user) {
        if (user) {
            await that.getUserProfile(user.uid);
        } else {
            that.navigation.navigate('Auth');
        }
    })
  }

  render() {
    const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
    return (
      <Provider store={store}>
        <AppContainer/>
      </Provider>
    );
  }
}

const mapStateToProps = state => {
  return {
      user: state.auth.user
  }
}

export default connect(mapStateToProps, {getUserProfile})(App);

Я получил ошибку: Нарушение инварианта: не удалось найти "магазин "в контексте" Connect (приложение) ".Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему потребителю контекста React в Connect (App) в параметрах подключения. Как это исправить?

Answer 1

Теперь я вижу проблему.Вы используете connect на компоненте, который является родительским для компонента Provider .

Вам нужно создать новый компонент с именем Main и используйте connect на этом.Компонент App не может использовать connect, поскольку он не является дочерним по отношению к Provider , а является родительским.

Или другими словами:

App.js

import React from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux'; 
import reducers from './app/src/reducers';
import ReduxThunk from 'redux-thunk';

...

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

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

export default App;

Main.js

import React from 'react';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { connect } from 'react-redux';
import { firebase } from './config/config';
import { getUserProfile } from './app/src/actions/index';

...

const AppContainer = createAppContainer(MainStack);

class Main extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = () => {
    var that = this;
    firebase.auth().onAuthStateChanged(async function(user) {
        if (user) {
            await that.getUserProfile(user.uid);
        } else {
            that.navigation.navigate('Auth');
        }
    })
  }

  render() {
    return (
      <AppContainer />
    );
  }
}

const mapStateToProps = state => {
  return {
      user: state.auth.user
  }
}

export default connect(mapStateToProps, {getUserProfile})(Main);