Не удалось найти магазин ни в контексте, ни в реквизите

Я пишу код с react, и я только начал использовать redux (потому что мне нужен контейнер). Тем не менее, я застрял в одном месте на некоторое время.
Я получаю эту ошибку —

Инвариантное нарушение: не удалось найти «магазин» в контексте или
реквизит » Connect (HomePage)». Либо оберните корневой компонент в a
, или явно передать» магазин » как проп
«Connect (Домашняя Страница)».

Я попытался погуглить, и в соответствии с разделом устранения неполадок react-redux, это можно проверить, используя следующие три вещи:
1. Убедитесь, что на странице нет дублирующего экземпляра React.
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>
    );
  }
}

И эта ошибка происходит только на одном из двух компонентов у меня есть —

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

1 ответ

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