您好! 我有一个问题,我开始使用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"
},
答案 0 :(得分:0)
我认为您的问题与您Provider
与connect
发生地点相比的位置有关。
您正在连接包含Provider
的组件。
您需要确保所有连接的组件都是Provider
的孩子。
const ContainerComponent = () => {
const MyComponent = withAuthentication(App);
return (
<Provider store={store}>
<MyComponent />
</Provider>
)
}