CODEWITHSUNDEEP
react-nativereduxreact-redux
MonkeyBonkey
MonkeyBonkey

Reputation: 47861

Why does a basic react-native redux app throw "a could not find store error"

I'm trying to get started with react native and I'm getting the following error on a basic app

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)".

Here's my code 

import React, { Component, PropTypes } from 'react';
import { Text } from 'react-native';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { Provider, connect } from 'react-redux';
import thunk from 'redux-thunk';

import reducer from './reducers/counter';

const store = createStore(
  combineReducers({
    counter: reducer,
  }),
  {}, // initial state
  compose(
      applyMiddleware(thunk),
  ),
);

class App extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
  }

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

App.propTypes = {
  dispatch: PropTypes.func.isRequired,
  counter: PropTypes.number,
};

function mapStateToProps(state) {
  return {
    counter: state,
  };
}

export default connect(mapStateToProps)(App);

And here's the reducer:

// ./reducers/counter.js
export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

Upvotes: 1

Views: 835

Answers (1)

jpdelatorre
jpdelatorre

Reputation: 3593

Try to move the <Provider> out of your App component.

It should be something like

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

connect relies on the store inside the context of the <Provider> component.

Upvotes: 1

Related Questions