React-redux: Could not find "store" in either the context or props

[anthonator]

I get a Could not find "store" in either the context or props error whenever I try to connect a component to Redux.

When I'm in the debug console I can see that state is defined on this and context but it has a value of undefined. Also, when I inspect createStore I get an object back with dispatch, getState, etc.

import { Provider } from 'react-redux';
import React from 'react';
import reducers from '../config/reducers';
import { createStore } from 'redux';
import routes from '../config/routes';

React.render(
  <Provider store={ createStore(reducers) }>
    { () => routes }
  </Provider>
, document.body);

Component

import React from 'react';

// components
import Footer from './_footer';
import Header from './_header';

// redux
import { connect } from 'react-redux';

import ClientSessionActionCreators from '../../actions/client-session-action-creators';

class ApplicationLayout extends React.Component {
  render() {
    return (
      <div>
        <Header />
        { this.props.children }
        <Footer />
      </div>
    );
  }
}

export default connect(state => state)(ApplicationLayout);

[gaearon]

I updated the doc to document your problem: https://github.com/gaearon/react-redux/blob/master/README.md#could-not-find-store-in-either-the-context-or-props

If you use React Router, something like <Provider>{() => routes}</Provider> won’t work. Due to the way context works in React 0.13, it’s important that the <Provider> children are _created_ inside that function. Just referencing an outside variable doesn’t do the trick. Instead of <Provider>{() => routes}</Provider>, write <Provider>{createRoutes}</Provider> where createRoutes() is a function that actually _creates_ (and returns) the route configuration.

[micky2be]

I don't understand. How can I use redux on a sidebar for instance?
My sidebar is always visible, it doesn't depends on the routes.

[gaearon]

@micky2be It's hard to help without seeing your code :-). With React 0.14 it should be enough just to wrap root component of your app into Provider. The discussion above is no longer relevant.

[JuoCode]

@micky2be You can refer to react-router-starter-kit, just put your sidebar code into Corelayout

[AndrewRayCode]

I'm having a very strange issue related to this and I'm not sure what's going on. TL;DR I'm nesting @connected component inside a @connected component and it's erroring and I have no idea why.

I'm using react-redux-universal-hot-example as my base.

The top level component looks like this:

const component = (
    <ReduxRouter routes={getRoutes(store)} />
);

ReactDOM.render(
    <Provider store={store} key="provider">
        {component}
    </Provider>,
    dest
);

The route handler <HighLevelComponent /> uses @connectData and @connect:

@connectData( fetchData )
@connect(
    state => ({ ... })
)
export default class HighLevelComponent extends Component {
    render() {
        return <SubComponent />;
    }
}

<SubComponent /> (inside <HighLevelComponent /> above) only has @connect:

@connect( state => ({ ... }) )
export default class SubComponent extends Component {
    render() {
        return <ChildWithConnect />
    }
}

<ChildWithConnect /> (inside <SubComponent /> above) also has @connect:

@connect(
    state => ({ ... })
)
export default class ChildWithConnect extends Component {

This errors:

Warning: Failed Context Types: Required context store was not specified in Connect(ChildWithConnect). Check the render method of SubComponent.
Uncaught Invariant Violation: Could not find "store" in either the context or props of
"Connect(ChildWithConnect)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(ChildWithConnect)"

This happens even if I have contextTypes defined:

ChildWithConnect.contextTypes = {
    store: PropTypes.object.isRequired
};

If I make <ChildWithConnect /> a direct child of <HighLevelComponent />, then there is no error.

You can see in the call stack for the error/warning above, context is an empty object and maskedContext has undefined for the store key:

Since it's defined as a contextType, shouldn't my sub component get the store passed to it automatically? Been pulling my hair out over this for a while, and I'm not sure if this is desired behavior, a bug, or I'm doing something incorrectly.

[gaearon]

First of all, you never need to specify contextTypes if you use connect(). This is exactly what connect() does for you on the component it generates and returns. So don’t worry about it and remove any contextTypes if you are not reading anything from this.context in your _own_ code.

Secondly, it is hard to say why it does not receive the context. My first hunch would be to check whether you might have a duplicate React installation which causes issues like this. If not, please post the project reproducing the issue, and I can take a look.

[D1plo1d]

I had a similar issue. Turned out that in babel 6 babel-plugin-transform-decorators-legacy does not handle class properties properly. If you are using babel-plugin-transform-decorators-legacy and set the contextType of your class using a static property babel is actually erroneously applying that static property to the decorated class (ie. the object returned by the connect decorator) instead of your original class.

Once I've got a test case to prove it I'm going to file an issue with babel-plugin-transform-decorators-legacy.

[gaearon]

Once I've got a test case to prove it I'm going to file an issue with babel-plugin-transform-decorators-legacy.

I think this won’t help because the underlying issue is in Babel 6 “merging” transforms. So the properties transform runs too late.

They added an experimental passPerPreset option in https://github.com/babel/babel/commit/3f1353d01f32bb73929a929a518cd250828cdb62 so you can try using that to force it to apply decorators in a separate pass.

[gaearon]

See discussion of passPerPreset in https://github.com/babel/babel/pull/3281.

[D1plo1d]

Oh awesome, yeah I'll try that. Thanks!

[Zara603]

I have a component for email subscription which is part of homepage. so I'm not using routes. Root component is wrapped in provider but I still get this error.

[gaearon]

I have a component for email subscription which is part of homepage. so I'm not using routes. Root component is wrapped in provider but I still get this error.

Unfortunately this is not enough information to be able to help you. Can you post a complete project on GitHub?

[KeKs0r]

I run into the same issue, but on the server side. And not sure if its possible with node to have the issue of 2 React instances.

Are there any troubleshooting ideas for the Server Side?

[lonelyclick]

https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy#babel-legacy-decorator-plugin

/// WRONG

"plugins": [
  "transform-class-properties",
  "transform-decorators-legacy"
]

// RIGHT

"plugins": [
  "transform-decorators-legacy",
  "transform-class-properties"
]

[to175]

@lonelyclick hey I can't find this in my project, where is the file please ? Your link is broken 😫

[kopax]

Hi,

I am having the same error,

export default compose(
    getContext({
        authProvider: PropTypes.func,
    }),
    connect(mapStateToProps, { userLogout })
)(CoreAdminRouter);

produce the error Could not find "store" in either the context or props of "Connect(CoreAdminRouter)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(CoreAdminRouter)".

I have a <Provider store={store}> at the root of my application and I am using a non ejected create-react-app version 2.1.3

Is there a way to debug this?

[markerikson]

@kopax :
This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out - you'll probably get a better answer faster. Thanks!