Question

您好！ 我有一个问题，我开始使用React与Redux。我使用Firebase身份验证启动了我的应用程序我想将Redux与我的应用程序集成，但是我有一个错误，因为我在AppComponent上使用了HOC。但我发现自己有以下错误：

非常感谢你..我在互联网上找不到这种类型的错误。我需要将历史记录传递给我的子组件...

无法在“Connect（WithAuthentication）”的上下文或道具中找到“store”。将根组件包装在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>
  )
}

无法在“连接（WithAuthentication）”的上下文或道具中找到“存储”

1 个答案: