store UI in redux-persist

ui/package.json

@@ -14,6 +14,7 @@
     "react-dom": "^18.2.0",
     "react-redux": "^9.0.4",
     "react-scripts": "5.0.1",
+    "redux-persist": "^6.0.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

ui/src/store/index.js

@@ -1,8 +1,11 @@
-import { configureStore } from "@reduxjs/toolkit";
+import { combineReducers, configureStore } from "@reduxjs/toolkit";
 import { Provider } from "react-redux";
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 
 // slices
 import { ALL_APP_SLICES } from "./slices";
+import { PersistGate } from "redux-persist/integration/react";
 
 // listeners
 // import { eventsListener } from "./listeners";
@@ -34,18 +37,31 @@ function buildAppStore(preloadedState) {
 // preloadedState is an optional parameter that allows you to pass in an initial state for the store.
 const AppStore = ({ children, preloadedState = {}, returnStore = false }) => {
   const { reducers, state } = buildAppStore(preloadedState);
+  // create a persisted reducer
+  const persistedReducer = persistReducer(
+    {
+      key: 'root',
+      storage,
+      whitelist: ['UI']
+    },
+    combineReducers(reducers)
+  );
+
   const store = configureStore({
-    reducer: reducers,
+    reducer: persistedReducer,
     preloadedState: state,
-    // middleware: (getDefaultMiddleware) => getDefaultMiddleware().prepend(eventsListener.middleware),
   });
+  const persistor = persistStore(store);
+
   const provider = (
     <Provider store={store}>
-      {children}
+      <PersistGate loading={null} persistor={persistor}>
+        {children}
+      </PersistGate>
     </Provider>
   );
 
-  if (returnStore) return { store, provider };
+  if (returnStore) return { store, provider, persistor };
   return provider;
 };
 

ui/src/store/slices/UI.js

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const INITIAL_STATE = {
-  pouringTime: 0,
+  pouringTime: 1000,
 };
 // slice for system status
 export const UISlice = createSlice({