Error in react-native with expo: Could not find "store" in the context of "Connect(App)" - react-native

Question

I'm building my first react native app and I encountered a problem to connect to redux store (I also do not have much experience with redux yet). I am using expo.
The error is:
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.
This error is located at:
in Connect(App) (at withExpoRoot.js:22)
(...)
Here is my code:
Could you please help?
// App.js
import React, { Component } from "react";
import AppStackNav from "./navigators/AppStackNav";
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';
import guestsReducer from "./reducers/GuestsReducer";
const store = createStore(guestsReducer);
class App extends Component {
constructor(props) {
super(props);
}
addGuest = (index) => {
// ...
}
render() {
return (
<Provider store={store}>
<AppStackNav
screenProps={{
currentGuests: this.state.currentGuests,
possibleGuests: this.state.possibleGuests,
addGuest: this.addGuest
}}
/>
</Provider>
)
}
}
const mapStateToProps = state => {
return {
currentGuests: this.state.current,
possibleGuests: this.state.possible,
addGuest: this.addGuest
};
}
export default connect(mapStateToProps)(App);
// GuestsReducer.js
import { combineReducers } from 'redux';
const INITIAL_STATE = {
current: 10,
possible: [
'Guest1',
'Guest2',
'Guest3',
'Guest4',
],
};
const guestsReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
default:
return state
}
};
export default combineReducers({
guests: guestsReducer,
});
// AppStackNav.js
import { createStackNavigator, createAppContainer } from "react-navigation";
import Home from "../screens/Home";
import Dashboard from "../screens/Dashboard";
import Project from "../screens/Project";
import Placeholder from "../screens/Placeholder";
const AppStackNav = createStackNavigator({
// ...
});
export default createAppContainer(AppStackNav);

Answer 1

First Issue
const mapStateToProps = ({ guests }) => {
return {
currentGuests: guests.current,
possibleGuests: guests.possible
};
}
Second Issue
You wire redux store to your upper level component which is the App component ... and then use connect and mapStateToProps to access redux store in the children of this upper level component (App) ... I mean you connect your store via mapStateToProps to your AppStackNav component not the App component
const AppStackNav = ({ currentGuests, possibleGuests }) => {
const Stack = createStackNavigator({...});
return <Stack />;
};
const mapStateToProps = ({ guests }) => {
return {
currentGuests: guests.current,
possibleGuests: guests.possible
};
}
// react-navigation v2 is needed for this to work:
export default connect(mapStateToProps)(AppStackNav);
App.js
class App extends Component {
constructor(props) {
super(props);
}
addGuest = (index) => {
// ...
}
render() {
return (
<Provider store={store}>
<AppStackNav />
</Provider>
)
}
}
export default App;

Answer 2

you can't use 'this' keyword outside the class as It wont be able to understand the context for that particular method.
you need to simply remove this keyword from mapStateToProps
like this:
const mapStateToProps = state => {
return {
currentGuests: state.current,
possibleGuests: state.possible
};
}