Using Redux with 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)

Carlos C · Accepted Answer · 2017-12-30 20:35:06Z

2

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.

answered Dec 30, 2017 at 20:35

Carlos C

6773 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vincent · Accepted Answer · 2017-12-31 08:37:52Z

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!

answered Dec 31, 2017 at 8:37

Vincent

1612 silver badges16 bronze badges

Comments

Ayushman Kishore Dash · Accepted Answer · 2017-12-30 15:47:34Z

0

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)

answered Dec 30, 2017 at 15:47

Ayushman Kishore Dash

811 gold badge2 silver badges2 bronze badges

3 Comments

preston Over a year ago

Thanks but that did not make a difference. I am still getting Error: Invariant Violation: Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".

Ayushman Kishore Dash Over a year ago

I think the error is arising because you are using both the Provider and connect at the same time,Redux follows a hiearchial pattern so you have pass the store in the provider first then use it using connect,so its better you create a separate file to use connect

Ayushman Kishore Dash Over a year ago

Check this out gist.github.com/aurelkurtula/b30064ba59b3c16d1a6b18260fcd7bcc

Collectives™ on Stack Overflow

Using Redux with React Native

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related