Could not find “store” in either the context or pr

Question

I have been using React Native for a few years and have only recently needed to utilise Redux on a new, more complex project. I am currently in the process of following a number of tutorials trying to work my way through the basics.

I am currently stuck with the following error:

Invariant Vilation: Could not find "store" in either the context of props of "Connect(App)"

I have found a number of posts with information about this error but because of the low amount of knowledge I currently have, I am unsure as to how to correctly implement a fix.

This project was created with create-react-native-app and I am using the Expo app to test.

In my eyes this should work because the root element of App is a Provider element passing the store as a prop which seems to contradict what the error is saying.

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import app from './reducers';
import thunk from 'redux-thunk';

export default function configureStore() {
  return createStore(app, applyMiddleware(thunk));
}

App.js:

import React from 'react';
import { Text } from 'react-native';

import { Provider, connect } from 'react-redux';
import configureStore from './configureStore';
import fetchPeopleFromAPI from './actions';

const store = configureStore();

export class App extends React.Component {
  componentDidMount() {
    props.getPeople()
  }

  render() {
    const { people, isFetching } = props.people;

    return (
      <Provider store={store}>
        <Text>Hello</Text>
      </Provider>
    );
  }
}

function mapStateToProps(state) {
  return {
    people: state.people
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

You are trying to access the store in the App component even before it has been passed. Therefore it is not able to find the store.

You need to make a separate component and connect that using react-redux such as

<Provider store={store}>
   <ConnectedComponent />
</Provider>

...
class ConnectedComponent extends React.Component {
  componentDidMount () {
    this.props.getPeople()
  }

  render() {
   return (
     <View>
       <Text> ... </Text>
     </View>
   )
 }
}


function mapStateToProps(state) {
  return {
    people: state.people
  }
}

function mapDispatchToProps(dispatch) {
  return {
    getPeople: () => dispatch(fetchPeopleFromAPI())
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ConnectedComponent);