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

Question

我正在用 react 编写代码，我刚开始使用 redux（因为我需要一个容器）。但是，我现在已经被困在一个地方了。
我收到此错误 -

不变违规：在上下文中找不到“商店”或 “连接（主页）”的道具。要么将根组件包装在 , 或明确地将“商店”作为道具传递给 “连接（主页）”。

我试过谷歌搜索，根据 react-redux 的troubleshooting section，可以使用这三个东西来检查：
1. 确保页面上没有重复的 React 实例。
2. 确保您没有忘记将根组件包装在 .
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>
    );
  }
}

而且这个错误只发生在我拥有的两个组件之一上 -

// 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

不确定这是否是您的问题所在。所以我可能离基地很远。

但是，我会检查以确保您将子代传递给您的组件。我这样做的方式是在我的 App 类中：

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