Using Redux with React Native - react-native

Question

I am working on a react-native app created using: create-react-native-app
As far as I can tell the most top level component is inside the App.js file and I have imported the Provider there and wrapped it around the Top Level Component but I am still getting the following errors for some reason:
ExceptionsManager.js:65 Invariant Violation: Could not find "store" in
either the context or props of "Connect(App)". Either wrap the root
component in a , or explicitly pass "store" as a prop to
"Connect(App)".
What am I doing wrong?
Here is my code:
import React from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button,TouchableOpacity } from 'react-native';
import { TabNavigator, StackNavigator } from 'react-navigation';
import { Constants } from 'expo'
import { purple, white } from './utils/colors'
import { saveDeckTitle, getDecks, getDeck, addCardToDeck } from './utils/api'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import { connect } from 'react-redux'
import Decks from './components/Decks'
import NewQuestionView from './components/NewQuestionView'
import NewDeck from './components/NewDeck'
const R = require('ramda')
const store = createStore(reducer)
const DecksETC = StackNavigator({
Decks: {
screen: Decks
},
NewDeck: {
screen: NewDeck
},
NewQuestionView: {
screen: NewQuestionView
}
})
const NewDeckETC = StackNavigator({
NewDeck: {
screen: NewDeck
},
Decks: {
screen: Decks
},
NewQuestionView: {
screen: NewQuestionView
}
})
const Tabs = TabNavigator({
DecksETC: {
screen: DecksETC
},
NewDeckETC: {
screen: NewDeckETC
}
});
class App extends React.Component {
render() {
console.log('R', R)
return (
<Provider store={store}>
<Tabs />
</Provider>
// <Tabs />
);
}
}
const styles = StyleSheet.create({
container: {
paddingTop: 23,
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
input: {
margin: 15,
height: 40,
borderColor: '#7a42f4',
borderWidth: 1
},
});
function mapStateToProps(state) {
console.log('mapStateToProps')
debugger
return {
'sample': 'sample'
}
}
export default connect(mapStateToProps)(App)

Answer 1

The problem is that App component does not know anything about the store because the Provider component is what brings the Redux store into its children components. The App component itself does not receive a reference to the store, so when you try to connect, the store is not found.

Answer 2

Well I see you have use connect function for the root component directly, which is a pattern I never see before. Let's try the normal way, which is that you will create a Root component and just use it inside Provider. Then you will pass child components into that Root component.
You will then separate each child component into a new file. In each file, you will use connect() to pass redux store into that component. That's the common pattern I see in many many projects. And this pattern will help you avoid confusing situation like above!

Answer 3

Well the function connect requires two functions mapStateToProps and mapDispatchToProps as arguments
i.e. export default connect(mapStateToProps,mapDispatchToProps)(App)
if you do not have a mapDispatchToProps then simply pass null.
i.e. export default connect(mapStateToProps,null)(App)