save progress in local storage

client/src/state/store.ts

@@ -3,13 +3,15 @@ import { connection } from '../connection'
 import thunkMiddleware from 'redux-thunk'
 import { apiSlice } from './api'
 import { progressSlice } from './progress'
-
+import { saveState } from "./localStorage";
+import { debounce } from "debounce";
 
 export const store = configureStore({
   reducer: {
     [apiSlice.reducerPath]: apiSlice.reducer,
     [progressSlice.name]: progressSlice.reducer,
   },
+  // Make connection available in thunks:
   middleware: getDefaultMiddleware =>
     getDefaultMiddleware({
       thunk: {
@@ -18,6 +20,15 @@ export const store = configureStore({
     }).concat(apiSlice.middleware),
 });
 
+// Save progress in local storage
+store.subscribe(
+  // we use debounce to save the state once each 800ms
+  // for better performances in case multiple changes occur in a short time
+  debounce(() => {
+    saveState(store.getState()[progressSlice.name]);
+  }, 800)
+);
+
 // 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}