I am using Firebase authentication and react-redux in my app. I added firebase.auth().onAuthStateChanged
to my App.js's componentDidMount
function to check for user login status throughout the app. I tried connecting App.js to my redux actions's function getUserProfile
like this:
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);
I got the error: Invariant Violation: Could not find "store" in the context of "Connect(App)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options. How do I fix this?