Не удалось найти «store» ни в контексте, ни в «Connect» (WithAuthentication)

Question

Привет! У меня проблема, я начинаю использовать React с Redux. Я запустил свое приложение с аутентификацией Firebase. Я хотел интегрировать Redux с моим приложением, но у меня есть ошибка, потому что я использую HOC на своем AppComponent. Но я обнаружил себя с ошибкой ниже:

Большое вам спасибо .. Я не нахожу такого типа ошибки с HOC в Интернете .. Мне нужно передать историю моим дочерним компонентам ...

Не удалось найти «store» ни в контексте, ни в подпунктах «Connect (WithAuthentication)». Либо оберните корневой компонент в a, либо явно передайте «store» как реквизит «Connect (WithAuthentication)». ErrorMessage

А вот мои компоненты:

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from './components/App';

import "./index.css";

import registerServiceWorker from "./registerServiceWorker";

  
ReactDOM.render(
  <App/>,
  document.getElementById("root")
);

registerServiceWorker();

AppComponent

import React from 'react';

import createHistory from 'history/createBrowserHistory';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { routerMiddleware } from 'react-router-redux';

import Router from './Router';
import withAuthentication from '../Session/withAuthentication';

import rootReducer from '../../reducers';

class App extends React.Component {
  history;
  store;
  middlewares = [];

  constructor() {
    super();

    this.history = createHistory();
    this.middlewares = [routerMiddleware(this.history)];
    this.store = createStore(
      rootReducer,
      applyMiddleware(...this.middlewares)
    );
  }
  
  render() {
    return (
      <Provider store={this.store}>
        <Router history={this.history} />
      </Provider>
    );
  }
}

export default withAuthentication(App);

Router.js

import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Route, Switch } from 'react-router-dom';

import Navigation from '../Navigation';
import LandingPage from '../Landing';
import SignUpPage from '../SignUp';
import SignInPage from '../SignIn';
import ArticlePage from '../Article';
import PasswordForgetPage from '../PasswordForget';
import HomePage from '../Home';
import AccountPage from '../Account';

import * as routes from '../../constants/routes';


const Router = () => (
  <ConnectedRouter history="truc">
    <Switch>
        <Navigation />

        <hr/>

        <Route exact path={routes.LANDING} component={() => <LandingPage />} />
        <Route exact path={routes.SIGN_UP} component={() => <SignUpPage />} />
        <Route exact path={routes.SIGN_IN} component={() => <SignInPage />} />
        <Route exact path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} />
        <Route exact path={routes.HOME} component={() => <HomePage />} />
        <Route exact path={routes.ACCOUNT} component={() => <AccountPage />} />
        <Route exact path={routes.ARTICLE} component={() => <ArticlePage />} />

        <hr/>

    </Switch>
  </ConnectedRouter>
);

  
export default Router;
  

И мой withAuthentication.js (тот работал раньше и не менялся)

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

import { firebase } from '../../firebase';

const withAuthentication = (Component) => {
  class WithAuthentication extends React.Component {
    componentDidMount() {
      const { onSetAuthUser } = this.props;

      firebase.auth.onAuthStateChanged(authUser => {
        authUser
          ? onSetAuthUser(authUser)
          : onSetAuthUser(null);
      });
    }

    render() {
      return (
        <Component />
      );
    }
  }

  const mapDispatchToProps = (dispatch) => ({
    onSetAuthUser: (authUser) => dispatch({ type: 'AUTH_USER_SET', authUser }),
  });

  return connect(null, mapDispatchToProps)(WithAuthentication);
  
}

export default withAuthentication;

    "dependencies": {
    "firebase": "^4.3.1",
    "history": "^4.7.2",
    "prop-types": "^15.5.10",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "react-scripts": "1.1.4",
    "recompose": "^0.27.0",
    "redux": "^4.0.0"
  },

Answer 1

Я думаю, что ваша проблема связана с тем, где вы отображаете ваш Provider по сравнению с тем, где ваш connect происходит.

Вы подключаете свой компонент, который содержит ваш Provider.

Необходимо убедиться, что любой подключенный компонент является дочерним по отношению к Provider.

const ContainerComponent = () => {
  const MyComponent = withAuthentication(App);
  return (
    <Provider store={store}>
      <MyComponent />
    </Provider>
  )
}