Save & load redux store to localStorage

Author: Alenar

mithril-explorer/pages/_app.js

@@ -2,11 +2,12 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import '../styles/globals.css'
 import Script from "next/script";
-import { storeWrapper } from "../store/store";
 import {Provider} from "react-redux";
+import {saveToLocalStorage, storeWrapper} from "../store/store";
 
 function MithrilExplorer({ Component, ...rest }) {
   const {store, pageProps} = storeWrapper.useWrappedStore(rest);
+  store.subscribe(() => saveToLocalStorage(store.getState()));
 
   return (
     <>

mithril-explorer/store/settingsSlice.js

@@ -5,6 +5,7 @@ export const settingsSlice = createSlice({
   name: 'settings',
   initialState: {
     aggregator: available_aggregators[0],
+    availableAggregators: available_aggregators,
     updateInterval: 10000,
     autoUpdate: true,
   },

mithril-explorer/store/store.js

@@ -2,10 +2,27 @@ import { configureStore } from "@reduxjs/toolkit";
 import { createWrapper } from "next-redux-wrapper";
 import {settingsSlice} from "./settingsSlice";
 
-const makeStore = () => configureStore({
+const SAVED_STATE_KEY = "Explorer_State";
+
+export function saveToLocalStorage(state) {
+  if (typeof window !== 'undefined' && localStorage) {
+    localStorage.setItem(SAVED_STATE_KEY, JSON.stringify(state));
+  }
+}
+
+function loadFromLocalStorage() {
+  if (typeof window !== 'undefined' && localStorage) {
+    const serialisedState = localStorage.getItem(SAVED_STATE_KEY);
+    return serialisedState ? JSON.parse(serialisedState) : undefined;
+  }
+  return undefined;
+}
+
+const storeBuilder = () => configureStore({
   reducer: {
     settings: settingsSlice.reducer,
   },
-})
+  preloadedState: loadFromLocalStorage(),
+});
 
-export const storeWrapper = createWrapper(makeStore);
+export const storeWrapper = createWrapper(storeBuilder);