添加store

package.json

@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.11.0",
     "@mui/lab": "5.0.0-alpha.114",
     "@mui/material": "^5.11.3",
+    "@reduxjs/toolkit": "^1.9.1",
     "dayjs": "^1.11.7",
     "imagesloaded": "^5.0.0",
     "intersection-observer": "^0.12.2",
@@ -32,6 +33,7 @@
     "react-flip-toolkit": "^7.0.17",
     "react-intersection-observer": "^9.4.1",
     "react-photo-view": "^1.2.3",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^6.6.1",
     "react-use": "^17.4.0",
     "whatwg-fetch": "^3.6.2"

src/main.tsx

@@ -1,20 +1,22 @@
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+//router page
 import VideoPage from "./routers/video";
-import "./index.less";
 import Layout from "./routers/layout";
 import PhotoPage from "./routers/photo";
 import ErrorPage from "./routers/error";
+//preview
 import ScreenProview from "@components/proview/screenSize";
-import TagSelectProview from "@components/proview/tagSelect";
-
+import MUIThemePreview from "@components/proview/themePreview";
+import { Provider } from "react-redux";
+import store from "@store/index";
 //ployfill
 import "intersection-observer";
 import "./normalize.css";
 import "loading-attribute-polyfill";
 import "whatwg-fetch";
-import NavShowProview from "@components/proview/navShow";
-import MUIThemePreview from "@components/proview/themePreview";
+import "./index.less";
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -51,12 +53,10 @@ const router = createBrowserRouter([
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <ScreenProview>
-    <TagSelectProview>
-      <NavShowProview>
-        <MUIThemePreview>
-          <RouterProvider router={router} />
-        </MUIThemePreview>
-      </NavShowProview>
-    </TagSelectProview>
+    <MUIThemePreview>
+      <Provider store={store}>
+        <RouterProvider router={router} />
+      </Provider>
+    </MUIThemePreview>
   </ScreenProview>
 );

src/routers/layout/index.tsx

@@ -1,23 +1,28 @@
-import { Flipped } from "react-flip-toolkit";
+import { Flipped, Flipper } from "react-flip-toolkit";
 import { Outlet } from "react-router-dom";
 import Header from "./header";
 import Header_Nav from "./nav";
+import { useAppSelector } from "@store/hooks";
+import { selectNavMoreShowed } from "@store/device/index";
 export default function Layout() {
+  const showed = useAppSelector(selectNavMoreShowed);
   return (
     <>
-      <Header />
-      <nav className='feedContainer'>
-        <Header_Nav />
-      </nav>
-      <Flipped flipId={"list"} spring={"veryGentle"}>
-        <main>
-          <section
-          // className=
-          >
-            <Outlet />
-          </section>
-        </main>
-      </Flipped>
+      <Flipper flipKey={showed} decisionData={showed} spring={"veryGentle"}>
+        <Header />
+        <nav className='feedContainer'>
+          <Header_Nav />
+        </nav>
+        <Flipped flipId={"list"} spring={"veryGentle"}>
+          <main>
+            <section
+            // className=
+            >
+              <Outlet />
+            </section>
+          </main>
+        </Flipped>
+      </Flipper>
     </>
   );
 }