next 14 appRouter redux数据持久化

最新推荐文章于 2024-06-18 10:03:39 发布

（；￣ェ￣）。

最新推荐文章于 2024-06-18 10:03:39 发布

阅读量426

点赞数 5

文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_35496811/article/details/136486402

版权

store/index.tsx

'use client'
import { ReactElement, memo } from 'react';
import { PersistGate } from 'reduxjs-toolkit-persist/integration/react';
import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'reduxjs-toolkit-persist';
import { Provider } from 'react-redux';
import storage from 'reduxjs-toolkit-persist/lib/storage'
import autoMergeLevel1 from 'reduxjs-toolkit-persist/lib/stateReconciler/autoMergeLevel1';
import countReducer from './count';
import userReducer from './userInfo';
import tipReducer from './tip';

const persistConfig = {
  key: 'root',
  storage: storage,
  stateReconciler: autoMergeLevel1,
};

const reducers = combineReducers({
  countReducer,
  userReducer,
  tipReducer
});

const _persistedReducer = persistReducer(persistConfig, reducers as any);

export const store = configureStore({
  reducer: _persistedReducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
    serializableCheck: {
      /* ignore persistance actions */
      ignoredActions: [
        FLUSH,
        REHYDRATE,
        PAUSE,
        PERSIST,
        PURGE,
        REGISTER
      ],
    },
  }),
});

let persistor = persistStore(store)

// function Providers(props: { children: ReactElement<any, any>; store: { userInfo: any; token: string; }; }) {
function Providers(props: { children: ReactElement<any, any>; }) {

  return (<>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {props.children}
      </PersistGate>
    </Provider>
  </>);
}

export default memo(Providers);

app/layout.tsx

import type { Metadata } from 'next';
import { ReactNode } from 'react';
import { Inter } from 'next/font/google';
import Providers from '@/store';
import './globals.css';
import Layout from '@/components/layout';

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

const RootLayout = ({ children, }: { children: ReactNode }) => {

  return (<>
    <html lang="en" className='bg-zinc-100'>
      <body className={inter.className}>
        {/* <Providers store={{ userInfo, token }}> */}
        <Providers>
          <Layout>{children}</Layout>
        </Providers>
      </body>
    </html>
  </>)
}

export default RootLayout;

export function reportWebVitals(mertic: any) {

  switch (mertic.name) {
    case 'FCP':
      console.log('FCP', mertic);
      break;
    case 'LCP':
      console.log('LCP', mertic);
      break;
    case 'CLS':
      console.log('CLS', mertic);
      break;
    case 'FID':
      console.log('FID', mertic);
      break;
    case 'TTFB':
      console.log('TTFB', mertic);
      break;
    default:
      break;
  }

}

package.json

{
  "name": "test2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev -p 4000",
    "build": "next build",
    "start": "next start -p 4000",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^1.9.7",
    "@uiw/react-md-editor": "^4.0.2",
    "axios": "^1.6.5",
    "date-fns": "^3.1.0",
    "iron-session": "^8.0.1",
    "js-base64": "^3.7.5",
    "markdown-to-txt": "^2.0.1",
    "md5": "^2.3.0",
    "mockjs": "^1.1.0",
    "next": "^14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "react-redux": "^8.0.2",
    "reduxjs-toolkit-persist": "^7.2.1",
    "sequelize": "^6.35.2",
    "autoprefixer": "^10.0.1",
    "mysql2": "^3.6.5",
    "uuid": "^9.0.1"
  },
  "devDependencies": {
    "@types/js-base64": "^3.3.1",
    "@types/uuid": "^9.0.7",
    "@types/md5": "^2.3.5",
    "@types/mockjs": "^1.0.10",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/sequelize": "^4.28.19",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "postcss": "^8",
    "sass": "^1.69.7",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  },
  "browserslist": [
    "chrome 64",
    "edge 79",
    "firefox 67",
    "opera 51",
    "safari 12"
  ]
}