2015-09-25 86 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()返回一個對象(包裹在花括號中)。一旦我將它們改爲大括號(即返回一個函數),錯誤就消失了......感謝提示。 –