CODEWITHSUNDEEP
javascriptreactjs
zicxor
zicxor

Reputation: 57

React, Javascript - Could not find "store" in the context of "Connect(App)"

I am trying to add propTypes and mapStateToProps to App.js component for React-intl. But it says Could not find "store" in the context of "Connect(App)".

My App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { setCurrentUser, logoutUser } from "./actions/authActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";

import { Provider } from "react-redux";
import store from "./store";

import PrivateRoute from "./components/common/PrivateRoute";

import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import Main from "./components/main/Main";
import Account from "./components/main/Account";

import { IntlProvider } from "react-intl";
import "./App.css";

// Check for token
if (localStorage.jwtToken) {
  // Set auth token header auth
  setAuthToken(localStorage.jwtToken);
  // Decode token and get user info and exp
  const decoded = jwt_decode(localStorage.jwtToken);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));

  // Check for expired token
  const currentTime = Date.now() / 1000;
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // TODO: Clear current Profile

    // Redirect to login
    window.location.href = "/login";
  }
}

class App extends Component {
  render() {
    const { lang } = this.props;
    return (
      <Provider store={store}>
        <Router>
          <IntlProvider locale={lang}>
            <div className="App">
              <Navbar />
              <Route exact path="/" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Main} />
                <PrivateRoute exact path="/account" component={Account} />
              </Switch>
              <Footer />
            </div>
          </IntlProvider>
        </Router>
      </Provider>
    );
  }
}

App.propTypes = {
  lang: PropTypes.string.isRequired
};

const mapStateToProps = state => ({
  lang: state.locale.lang
});

export default connect(mapStateToProps)(App);

Says "Could not find "store" in the context of "Connect(App)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(App) in connect options."

Upvotes: 0

Views: 1195

Answers (1)

kyun
kyun

Reputation: 10264

Try to move <Provider /> and <Router /> to index.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';
import store from './store';

ReactDOM.render(
  <BrowserRouter>
    <Provider store={store}>
      <Route component={App} />
    </Provider>
  </BrowserRouter>, document.getElementById('root'));

App.js

class App extends Component {
  render() {
    const { lang } = this.props;
    return (
          <IntlProvider locale={lang}>
            <div className="App">
              <Navbar />
              <Route exact path="/" component={Register} />
              <Route exact path="/login" component={Login} />
              <Switch>
                <PrivateRoute exact path="/dashboard" component={Main} />
                <PrivateRoute exact path="/account" component={Account} />
              </Switch>
              <Footer />
            </div>
          </IntlProvider>
    );
  }
}

Upvotes: 2

Related Questions