add redux-persist to localStorage

Author: keynertyc

package.json

@@ -20,6 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": "^8.0.5",
+    "redux-persist": "^6.0.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 'use client'
 import { Provider } from 'react-redux'
-import { store } from '@/store/store'
+import { store, persistor } from '@/store/store'
+import { PersistGate } from 'redux-persist/integration/react'
 
 interface Props {
   children: React.ReactNode
@@ -9,7 +10,9 @@ interface Props {
 const Providers = ({ children }: Props) => {
   return (
     <Provider store={store}>
-      {children}
+      <PersistGate loading={null} persistor={persistor}>
+        {children}
+      </PersistGate>
     </Provider>
   )
 }

src/components/Providers.tsx

@@ -1,15 +1,36 @@
-import { configureStore } from "@reduxjs/toolkit"
-import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
 import { cartSlice } from "./features/cartSlice"
+import { configureStore, combineReducers } from '@reduxjs/toolkit';
+import { persistReducer, persistStore, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from "redux-persist"
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2"
+import storage from "redux-persist/lib/storage"
+
+const persistConfig = {
+  key: "root",
+  storage,
+  stateReconciler: autoMergeLevel2,
+}
+
+const rootReducer = combineReducers({
+  cart: cartSlice.reducer,
+})
+
+const persistedReducer = persistReducer(persistConfig, rootReducer)
 
 export const store = configureStore({
-  reducer: {
-    cart: cartSlice.reducer,
-  },
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+      },
+    }),
 })
 
 export type RootState = ReturnType<typeof store.getState>
 export type AppDispatch = typeof store.dispatch
 
 export const useAppDispatch: () => AppDispatch = useDispatch
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
+export const persistor = persistStore(store)