Javascript 简单的授权检查会导致redux存储提供程序崩溃

我有一个内置React和Redux的应用程序，在我实现了一个简单的

localStorage

检查以呈现

App

或我调用的

Gateway

的身份验证页面之前，它一直运行良好：

App.js

import React, { useState } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

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

import NavBar from "./components/NavBar";

import Settings from "./views/Settings";
import Gateway from "./views/Gateway";
import Profile from "./views/Profile";
import Signup from "./views/Signup";
import NewTestimonialPage from "./views/NewTestimonialPage";
import NotFoundPage from "./views/NotFoundPage";

import "./styles/App.scss";

function App() {
  // new additions start here...
  const [loggedIn, setLoggedIn] = useState(
    localStorage.getItem("loggedIn") === "true"
  );

  if (!loggedIn) {
    return <Gateway />;
  }
...and end here
  
  return (
    <Router>
      <Provider store={store}>
        <NavBar />
        <div className="navbar-dodger"></div>
        <div className="App">
          <Switch>
            <Route exact path="/" component={Gateway} />
            <Route path="/signup" component={Signup} />
            <Route path="/settings/:userId" component={Settings} />
            <Route path="/profile/:userId" component={Profile} />
            <Route
              path="/new-testimonial/:userId"
              component={NewTestimonialPage}
            />
            <Route path="/404" component={NotFoundPage} />
            <Route component={NotFoundPage} />
          </Switch>
        </div>
      </Provider>
    </Router>
  );
}

export default App;

import React，{useState}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react redux”导入{Provider}；
从“/redux/store”导入存储；
从“/components/NavBar”导入导航栏；
从“/views/Settings”导入设置；
从“/views/Gateway”导入网关；
从“/views/Profile”导入配置文件；
从“/views/Signup”导入注册；
从“/views/newtestionalpage”导入新的评价页面；
从“/views/NotFoundPage”导入NotFoundPage；
导入“/styles/App.scss”；
函数App（）{
//新的添加从这里开始。。。
常量[loggedIn，setLoggedIn]=useState(
localStorage.getItem（“loggedIn”）=“true”
);
如果（！loggedIn）{
返回；
}
…到此为止
返回(
);
}
导出默认应用程序；

没有注释之间的代码，一切都是100%好的

现在，我抛出这个错误：

在“连接（EmailCheck）”的上下文中找不到“存储”。将根组件包装在中，或者在连接选项中将自定义的React上下文提供程序传递给和相应的React上下文使用者以进行连接（EmailCheck）。

---

如果我也在If块中呈现提供程序，它就会工作。为什么？如果我没有在

网关中以任何方式使用redux，为什么我需要一个商店？
如果您在
组件中使用redux，那么您的组件必须包装在

它应该是这样的：

return (
  <Router>
    <Provider store={store}>
      {!loggedIn ?? <Gateway /> : <YourApplication />}
    </Provider>
  </Router>
);

返回(
{！loggedIn？？}
);

为应用程序创建一个组件，如
YourApplication.js：

return (
  <>    
    <NavBar />
    <div className="navbar-dodger"></div>
    <div className="App">
      <Switch>
        <Route exact path="/" component={Gateway} />
        <Route path="/signup" component={Signup} />
        <Route path="/settings/:userId" component={Settings} />
        <Route path="/profile/:userId" component={Profile} />
        <Route
          path="/new-testimonial/:userId"
          component={NewTestimonialPage}
        />
        <Route path="/404" component={NotFoundPage} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  <>
);

返回(
);