2015-09-25 85 views
13

我有一个应用程序的结构,主要是模仿了Redux real-world例子,但不能让过去收到此错误:阵营,Redux的连接方法无法找到店的道具

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

这里紧跟我的应用程序结构:

渲染

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) 
}; 

路由器

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; 

首页组件

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 = {} 
    } 

    componentWillMount() { 
     console.log(this.props.users.user) 
    } 

    componentWillUnmount() { 

    } 

    render() { 

     return (
      div({}, "Home") 
     ) 
    } 
} 

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

这导致在得到上面提到的错误。正如你所看到的,我正在以与redux示例中所示相同的方式通过商店。

回答

5

该解决方案在redux troubleshooting docs中找到。我需要让我的反应路由器返回一个创建实际路由器的功能:

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); 

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

同样的副作用。我有createStore()返回一个对象(包裹在花括号中)。一旦我将它们改为大括号(即返回一个函数),错误就消失了......感谢提示。 –