reactjs - React native - 在 App.js 中使用 react-redux 进行 Firebase 身份验证

Question

我在我的应用程序中使用 Firebase 身份验证和 react-redux。我添加firebase.auth().onAuthStateChanged了 App.js 的componentDidMount功能来检查整个应用程序中的用户登录状态。我尝试将 App.js 连接到我的 redux 操作的函数getUserProfile，如下所示：

应用程序.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(App)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(App)，并将相应的 React 上下文消费者传递给 Connect(App)。我该如何解决？

标签： reactjsfirebasereact-nativereduxreact-redux

Answer 1

我现在看到了问题。您在作为Provider组件的父组件的组件上使用connect。

您需要做的是创建一个名为Main的新组件并在其上使用connect。您的App组件不能使用 connect 因为它不是Provider的子级，而是父级。

或者换句话说：

应用程序.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;

主.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);