import React from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import { useOktaAuth } from "@okta/okta-react";
import { Superadmin } from "../../../../Application_Constants";
import { AuthPage } from "./AuthPage";
import { ErrorPage1 } from "../../errors/ErrorPage1";
import { makeStyles, useTheme } from "@material-ui/core/";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../../redux/reducer";
import Header from "../../header/Header";

const AppWithRouterAccess = () => {
  const store = createStore(reducer, applyMiddleware(thunk));

  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Switch>
      {!authState.isAuthenticated ? (
        /*Render auth page when user at `/auth` and not authorized.*/

        <Route>
          <AuthPage />
        </Route>
      ) : (
        /*Otherwise redirect to root page (`/`)*/
        <Redirect from="/auth" to="/" />
      )}

      <Route path="/error" component={ErrorPage1} />

      {!authState.isAuthenticated ? (
        /*Redirect to `/auth` when user is not authorized*/
        <Redirect to="/auth/login" />
      ) : (
        <>
          {/* provider used to integrates redux store with react application */}
          {/* redux provides a centralized store to manage the state of application */}
          <Provider store={store}>
            <Header />
          </Provider>
        </>
      )}
    </Switch>
  );
};

export default AppWithRouterAccess;

这是AppWithRouterAccess.js文件.authState.isAuthenticated正在刷新,因为Okta令牌正在刷新,而我的页面正在刷新和存储刷新.我如何停止我的Redux以在authState.isAuthenticated次更新后获得刷新.Redux存储不应更新.

推荐答案

无论出于何种原因,每次渲染AppWithRouterAccess时,都会重新创建store.创建组件store103,以便它只实例化一次.

const store = createStore(reducer, applyMiddleware(thunk));

const AppWithRouterAccess = () => {
  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Provider store={store}>
      <Switch>
        {!authState.isAuthenticated ? (
          <Route>
            <AuthPage />
          </Route>
        ) : <Redirect from="/auth" to="/" />
        }

        <Route path="/error" component={ErrorPage1} />

        {!authState.isAuthenticated
          ? <Redirect to="/auth/login" />
          : <Header />
        }
      </Switch>
    </Provider>
  );
};

Javascript相关问答推荐

vanillajs-datepicker未设置输入值,日期单击时未触发更改事件

将json数组项转换为js中的扁平

Cypress -使用commands.js将数据测试id串在一起失败,但在将它们串在一起时不使用命令有效

django无法解析余数:[0] from carray[0]'

被CSS优先级所迷惑

togglePopover()不打开但不关闭原生HTML popover'

如何使用JavaScript将文本插入空div

colored颜色 检测JS,平均图像 colored颜色 检测JS

为什么useState触发具有相同值的呈现

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

我可以使用空手道用户界面来获取网页的当前滚动位置吗?

连接到游戏的玩家不会在浏览器在线游戏中呈现

如何在脚本编译后直接将RxJ模块导入浏览器(无需Angel、webpack、LiteServer)

JavaScript&;Reaction-如何避免在不使用字典/对象的情况下出现地狱?

使用可配置项目创建网格

如何将字符串拆分成单词并跟踪每个单词的索引(在原始字符串中)?

Chrome上的印度时区名S有问题吗?

我们是否可以在reactjs中创建多个同名的路由

AstroJS混合模式服务器终结点返回404

如何动态呈现适合未知屏幕大小的最大数量的表行?苗条的