add redux-persist

admin-frontend/src/app/store.ts

@@ -1,21 +1,50 @@
-import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
+import {
+  Action, combineReducers, configureStore, ThunkAction,
+} from '@reduxjs/toolkit';
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import authReducer from '../features/auth/authSlice';
 import globalConfReducer from '../features/globalConf/globalConfSlice';
 import { subscribeApi } from '../features/subsribeConfigManager/subscribeConfigSlice';
 import { weightApi } from '../features/weightConfig/weightConfigSlice';
 
+const rootReducer = combineReducers({
+  auth: authReducer,
+  globalConf: globalConfReducer,
+  [subscribeApi.reducerPath]: subscribeApi.reducer,
+  [weightApi.reducerPath]: weightApi.reducer,
+});
+
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['auth'],
+};
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
 export const store = configureStore({
-  reducer: {
-    auth: authReducer,
-    globalConf: globalConfReducer,
-    [subscribeApi.reducerPath]: subscribeApi.reducer,
-    [weightApi.reducerPath]: weightApi.reducer,
-  },
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware()
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: {
+      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+    },
+  })
     .concat(subscribeApi.middleware)
     .concat(weightApi.middleware),
 });
 
+export const persistor = persistStore(store);
+
 export type AppDispatch = typeof store.dispatch;
 export type RootState = ReturnType<typeof store.getState>;
 export type AppThunk<ReturnType = void> = ThunkAction<

admin-frontend/src/index.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
+import { PersistGate } from 'redux-persist/integration/react';
 import App from './App';
-import { store } from './app/store';
+import { persistor, store } from './app/store';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
 
@@ -13,9 +14,11 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <BrowserRouter basename="/bison">
-        <App />
-      </BrowserRouter>
+      <PersistGate loading={null} persistor={persistor}>
+        <BrowserRouter basename="/bison">
+          <App />
+        </BrowserRouter>
+      </PersistGate>
     </Provider>
   </React.StrictMode>,
 );