Invariant Violation: Could not find "store" in either the context or props of "Connect(App)"
You are trying to access the store in the App component whereas, your Provider resides inside it. So, App doesn't really get store from the context. You need to wrap App with Provider like
class App extends React.Component {
constructor(...args) {
super(...args);
}
login({ username, password }) {
let requestData = new FormData();
requestData.append('username', username);
requestData.append('password', password);
console.log('[Login]: Attempt');
console.log(JSON.stringify(requestData, null, 4));
fetch('https://my-api.lab/user/login', {
method: 'POST',
body: requestData
}).then(res => res.json()).then((json) => {
console.log('[Login]: Response');
console.log(JSON.stringify(json, null, 4));
if (json.authenticated) {
console.log('[Login]: Success');
this.props.userLoginSuccess(json);
} else {
console.log('[Login]: Failure');
}
}).catch((err) => {
console.log('[Login]: error');
console.log(JSON.stringify(err, null, 4));
});
}
componentDidMount() {
console.log('App mounted!');
this.login({
username: 'asdf',
password: 'asdf'
});
}
render() {
let username = Object.keys(this.props.user).length ? this.props.user.data.post.username : '';
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome {username} to React Native!
</Text>
</View>
);
}
}
const mapStateToProps = (state) => {
return {
user: state.userReducer
}
}
const mapDispatchToProps = (dispatch) => {
return {
userLoginSuccess: (user) => {
dispatch({
type: 'USER_LOGIN_SUCCESS',
payload: user
})
},
userLoginFailure: (user) => {
}
}
}
const ConnectedApp = connect(mapStateToProps, mapDispatchToProps)(App);
export default const Root = () => {
<Provider store={store}><ConnectedApp/></Provider>
}
You have App
wrapped in a connect() method but are instantiating the <Provider>
component in App
. My hunch is that at this point there is no store
for connect to access and give to App
. Try removing the connect statement and see if that resolves your issue.
You have code that depends on data from store, I would comment that out for the time being to see if the above solution works. If it does, make app just a simple component that stands up the store and move the code for doing login and checking user to a new component.