無法在上下文或道具中找到商店

Question

我正在編寫具有反應的代碼，並且我剛開始使用redux（因爲我需要各種容器）。但是，我現在一直呆在一個地方。
我得到這個錯誤 -

不變違規：無論是在上下文或「連接（主頁）」的 道具找不到「存儲」。將根組件包裝在 中，或將「存儲」明確傳遞給 「連接（主頁）」。

我試着用搜索引擎，並且根據反應，終極版的troubleshooting section，這可以用這三樣東西進行檢查：
1.確保你沒有作出反應頁面上的重複實例。
2.確保你沒有忘記將你的根組件包裝在< Provider>中。
3.確保您正在運行最新版本的React和React Redux。

我有以下的代碼爲根（這是其中存儲與所述提供者定義的） -

import React from 'react'; 
import { Router, browserHistory } from 'react-router'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import reduxThunk from 'redux-thunk'; 
import routes from '../Routes'; 
import reducers from './reducers/reducers'; 
import actions from './actions/actions'; 

export default class AppRoutes extends React.Component { 
    render() { 

    const store = createStore(reducers, applyMiddleware(reduxThunk)); 
    return (
     <Provider store={store}>  
     <Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/> 
     </Provider> 
    ); 
    } 
} 

而這個錯誤只發生在兩個分量I有一個 -

// No error when connected only in this component 
import React from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from './actions/actions'; 

class Dashboard extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 
    return <h1>Hello, {this.props.isAuthenticated.toString()}</h1>; 
    } 
} 

function mapStateToProps(state) { 
    return { 
    content: state.auth.content, 
    isAuthenticated: state.auth.authenticated 
}; 
} 

export default connect(mapStateToProps, actions)(Dashboard); 

// Error thrown when I try to connect this component 
import React from 'react'; 
import LoginPage from './LoginPage'; 
import Dashboard from './Dashboard'; 
import Loading from './Loading'; 
import { connect } from 'react-redux'; 
import * as actions from './actions/actions'; 

class HomePage extends React.Component { 

    constructor(props) { 
    super(props); 
    this.setState({ 
     loading: true 
    }); 
    } 

    render() { 
    var inPage = undefined; 
    if(this.props.isAuthenticated) { 
     console.log('Logged in'); 
     inPage = <Dashboard user = {HomePage.user}/>; 
    } 
    else if (this.state.loading){ 
     console.log('Loading'); 
     inPage = <Loading />; 
    } 
    else { 
     console.log('Login'); 
     inPage = <LoginPage />; 
    } 

    return (
     <div> 
     {inPage} 
     </div> 
    ); 
    }  
} 

function mapStateToProps(state) { 
    this.setState({ 
    loading: false 
    }); 
    return { 
    content: state.auth.content, 
    isAuthenticated: state.auth.authenticated 
    } 
} 

export default connect(mapStateToProps, actions)(HomePage); 

Answer 1

不知道這是否是您的問題所在。所以我可能會離開基地。

但是，我會檢查一下，以確保您將孩子傳遞給您的組件。我這樣做的方式是在我的應用程序類這樣：

import React, {PropTypes} from 'react'; 
import { connect } from 'react-redux'; 

class App extends React.Component{ 
    render(){ 
    return(
     <div className="container-fluid"> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

App.propTypes={ 
    children: PropTypes.object.isRequired 
}; 

export default connect()(App);