React-redux: Could not find "store" error, the root is wrapped in a Provider

[julienvincent]

I'm structuring my project almost exactly like the real-world redux example, and have wrapped my react-router in a Provider with the store specified, but after trying to apply connect() to a component I get the error:

Uncaught Error: Invariant Violation: Could not find "store" in either the context or props of "Connect(Home)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Home)".

render

import { render, createFactory } from 'react'
import { Provider } from 'react-redux';
import router from './router/router'
import store from './flux/store'

window.onload = () => {
    render(createFactory(Provider)({store: store},
        () => router
    ), document.body)
};

Router

import { _ } from 'factories'
import { Router, IndexRoute, Route } from 'react-router'
import history from 'history/lib/createBrowserHistory'

import Home from '../components/home/home'

let route = _(Route),
    index = _(IndexRoute);

let router = _(Router)({history: history()},
    route({path: 'home', component: Home})
);
export default router;

Component

import React, { PropTypes } from 'react'
import { div } from 'factories'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux';
import * as users from '../../flux/actions/users'

class Home extends React.Component {

    constructor() {

        super();

        this.state = {}
    }

    render() {

        return (
            div({})
        )
    }
}

export default connect(
    state => {
        return {
            users: state.users
        }
    },
    dispatch => bindActionCreators(users, dispatch)
)(Home)

[gaearon]

Please see https://github.com/rackt/react-redux/issues/57. It's also on the "Troubleshooting" doc page: https://github.com/rackt/react-redux/blob/master/docs/troubleshooting.md#troubleshooting

[alex-wilmer]

I think it's worth leaving a link to the testing docs here http://redux.js.org/docs/recipes/WritingTests.html as its how I came across the solution for this issue: exporting the unconnected component.

[EugeneHlushko]

@alex-wilmer Thanks for leaving the link wide open in here, i would even go further here because this one is google top1 url for now and easy to reach:

In your tests, import the connect()'ed component via curly braces like so to avoid the error:
import { App } from './App'

While in your app you still use default imports:
import App from './App'

[Adzz]

...And further to that if you're using ESlint and you are getting a no-named-as-default error once you follow this pattern for testing, the TLDR is they can't co-exist, you'll have to disable that rule.

As suggested here and here