1

Note, before reading I have already looked at the following:

JestJS -> Invariant Violation: Could not find "store" in either the context or props of "Connect(Portfolio)"

ReactJs/Redux Invariant Violation: Could not find "store" in either the context or props of "Connect(LoginContainer)"

Could not find "store" in either the context or props of "Connect(App)" In an react-redux app

Also, I followed the tutorial shown here: https://www.youtube.com/watch?v=9mlwjZL3Fmw

The major difference is that I used create-react-native-app to initialize my project where the video creator does not.

I want to know if it's possible to get the connect to recognize all the components while keeping the App component in App.js as a js const. The previous solutions offered work when I switch to using a javascript class instead:

class App extends React.Component { etc..

The code is available here: https://github.com/qxh5696/first-react-native-app

I'd like to find the root cause as to why the "store" is not being recognized. Call it stubbornness but I am curious to know if anyone has found a solution to this problem.

Q.H.
  • 1,406
  • 2
  • 17
  • 33
  • maybe try the changes i made here: https://github.com/DeveloperACE/first-react-native-app (ill probably take it down eventually FYI). im pretty sure it wont do much but i was just looking at your code and noticed that you could simplify your `./configureStore.js` by not exporting a function and then more directly using that in your index files instead of creating that intermediary variable. – MoralCode Jul 07 '18 at 05:48

2 Answers2

1

The root cause of the error is when we put together a react-redux application we should expect to see a structure where at the top we have the Provider tag which has an instance of a redux store.

That Provider tag then renders your parent component, lets call it the App component which in turn renders every other component inside the application.

Here is the key part, when we wrap a component with the connect() function, that connect() function expects to see some parent component within the hierarchy that has the Provider tag.

So the instance you put the connect() function in there, it will look up the hierarchy and try to find the Provider.

Thats what you want to have happen, but in your test environment that flow is breaking down.

Daniel
  • 14,004
  • 16
  • 96
  • 156
0

import

import {connect} from "react-redux";

instead of

import connect from "react-redux/es/connect/connect";
Arun Jose
  • 76
  • 6