feat(favorites): added persistence for favorites store

package.json

@@ -16,6 +16,7 @@
     "react-redux": "^7.2.3",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "redux-persist": "^6.0.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

src/index.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
+import { PersistGate } from 'redux-persist/integration/react';
 import App from './App';
 import './index.css';
 import reportWebVitals from './reportWebVitals';
-import store from './store/store';
+import store, { persistor } from './store/store';
 
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
     </Provider>
   </React.StrictMode>,
   document.getElementById('root')

src/store/store.ts

@@ -1,33 +1,47 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { setupListeners } from '@rtk-incubator/rtk-query';
+import { persistStore, persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
 import { charactersApi } from '../services/characters';
 import { episodesApi } from '../services/episodes';
 import { locationsApi } from '../services/locations';
 import { charactersDialogSlice } from './charactersDialog';
 import { favoritesSlice } from './favorites';
 import { headerTitleSlice } from './headerTitle';
 
+// persist reducer
+const persistConfig = {
+  key: 'favorites',
+  version: 1,
+  storage,
+  whitelist: ['favorites']
+};
+
+// reducer
+const rootReducer = combineReducers({
+  [charactersApi.reducerPath]: charactersApi.reducer,
+  [locationsApi.reducerPath]: locationsApi.reducer,
+  [episodesApi.reducerPath]: episodesApi.reducer,
+  headerTitle: headerTitleSlice.reducer,
+  charactersDialog: charactersDialogSlice.reducer,
+  favorites: favoritesSlice.reducer
+});
+
 const store = configureStore({
-  reducer: {
-    // Add the generated reducer as a specific top-level slice
-    [charactersApi.reducerPath]: charactersApi.reducer,
-    [locationsApi.reducerPath]: locationsApi.reducer,
-    [episodesApi.reducerPath]: episodesApi.reducer,
-    headerTitle: headerTitleSlice.reducer,
-    charactersDialog: charactersDialogSlice.reducer,
-    favorites: favoritesSlice.reducer
-  },
-  // Adding the api middleware enables caching, invalidation, polling,
-  // and other useful features of `rtk-query`.
+  reducer: persistReducer(persistConfig, rootReducer),
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware()
+    getDefaultMiddleware({
+      serializableCheck: {
+        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+      }
+    })
       .concat(charactersApi.middleware)
       .concat(locationsApi.middleware)
       .concat(episodesApi.middleware)
 });
 
+export const persistor = persistStore(store);
+
 export default store;
 
-// optional, but required for refetchOnFocus/refetchOnReconnect behaviors
-// see `setupListeners` docs - takes an optional callback as the 2nd arg for customization
 setupListeners(store.dispatch);

yarn.lock

@@ -11944,6 +11944,11 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/redux-persist/-/redux-persist-6.0.0.tgz#b4d2972f9859597c130d40d4b146fecdab51b3a8"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"