feat: add redux-persist

package.json

@@ -18,7 +18,8 @@
     "@reduxjs/toolkit": "^2.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^9.0.4"
+    "react-redux": "^9.0.4",
+    "redux-persist": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/components/Draggables/Condition/DraggableCondition.tsx

@@ -5,10 +5,9 @@ import {
   incrementDuration,
   selectDurations,
 } from "../../../state/ccSlice";
-import Condition, { ConditionTypes } from "./Condition";
 import Draggable, { DraggableBaseProps } from "../Draggable";
 import classes from "../Draggable.module.css";
-import { Fragment } from "react";
+import Condition, { ConditionTypes } from "./Condition";
 
 export interface DraggableConditionProps extends DraggableBaseProps {
   gw2id: ConditionTypes;

src/components/SelectPreset/SelectPreset.tsx

@@ -1,10 +1,12 @@
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { presets } from "../../data/presets";
-import { setPreset } from "../../state/settingsSlice";
+import { selectPreset, setPreset } from "../../state/settingsSlice";
 
 export default function SelectPreset() {
   const dispatch = useDispatch();
 
+  const preset = useSelector(selectPreset);
+
   function handleChange(event: React.ChangeEvent<HTMLSelectElement>) {
     const preset = event.target.value;
     if (preset) dispatch(setPreset(preset));
@@ -18,7 +20,7 @@ export default function SelectPreset() {
       <select
         className="select select-bordered"
         onChange={handleChange}
-        defaultValue=""
+        defaultValue={preset ? preset : ""}
       >
         <option value="" disabled>
           -- Select a preset --

src/main.tsx

@@ -2,13 +2,16 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import { Provider } from "react-redux";
-import { store } from "./store.ts";
+import { store, persistor } from "./state/store.ts";
 import "./index.css";
+import { PersistGate } from "redux-persist/integration/react";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
     </Provider>
   </React.StrictMode>
 );

src/state/store.ts

@@ -0,0 +1,42 @@
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
+import ccReducer from "./ccSlice";
+import settingsReducer from "./settingsSlice";
+import storage from "redux-persist/lib/storage";
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER,
+} from "redux-persist";
+
+const persistConfig = {
+  key: "root",
+  storage,
+};
+
+const rootReducer = combineReducers({
+  cc: ccReducer,
+  settings: settingsReducer,
+});
+
+const persistedReducer = persistReducer(persistConfig, rootReducer);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
+});
+export const persistor = persistStore(store);
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;

src/vite-env.d.ts

@@ -1 +1,14 @@
 /// <reference types="vite/client" />
+import type { Action, Reducer } from "redux";
+import type { PersistConfig, PersistState } from "redux-persist";
+
+declare module "redux-persist" {
+  export function persistReducer<S, A extends Action = Action, P = S>(
+    config: PersistConfig<S>,
+    baseReducer: Reducer<S, A, P>
+  ): Reducer<
+    S & { _persist: PersistState },
+    A,
+    P & { _persist?: PersistState }
+  >;
+}