perf(state): use redux-toolkit and redux hooks instead of connect

- improve redux selectors
- move current chapter state into user state
- uninstall package [email protected]

package.json

@@ -37,7 +37,6 @@
     "fitty": "^2.3.3",
     "i18next": "19.8.3",
     "i18next-browser-languagedetector": "6.0.1",
-    "immer": "7.0.14",
     "ionicons": "5.2.3",
     "lunr": "^2.3.9",
     "react": "17.0.1",

src/App.tsx

@@ -29,12 +29,9 @@ import AboutPage from './pages/About';
 import { SearchPage } from './pages/Search';
 import { THEMES } from './utils/theme';
 import { selectCurrentTheme } from './data/user/user.selector';
-import { RootState } from './store';
 
 const App: React.FC = () => {
-  const currentTheme = useSelector((state) =>
-    selectCurrentTheme(state as RootState),
-  );
+  const currentTheme = useSelector(selectCurrentTheme);
 
   return (
     <Suspense fallback="<App Suspense Loading>">

src/components/Chapters/footer.tsx

@@ -10,12 +10,8 @@ import { arrowBack, arrowForward, star, starOutline } from 'ionicons/icons';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
-import {
-  addFavorite,
-  removeFavorite,
-} from '../../data/chapter/chapter.actions';
-import { selectIsChapterFavorite } from '../../data/chapter/chapter.select';
-import { RootState } from '../../store';
+import { selectIsFavorite } from '../../data/user/user.selector';
+import { addFavorite, removeFavorite } from '../../data/user/user.slice';
 
 type ContainerProps = {
   previousChapter: string;
@@ -27,9 +23,8 @@ export const ChapterFooter: React.FC<ContainerProps> = (props) => {
 
   const history = useHistory();
   const currentChapter = history.location.pathname;
-  const isFavorite = useSelector((state) =>
-    selectIsChapterFavorite(state as RootState, currentChapter),
-  );
+
+  const isFavorite = useSelector(selectIsFavorite(currentChapter));
   const dispatch = useDispatch();
 
   const toggleFavorite = () => {

src/components/SearchPopover/index.tsx

@@ -13,7 +13,6 @@ import {
 import { ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
 import { useDispatch, useSelector } from 'react-redux';
 import { setCurrentSearchView } from '../../data/user/user.slice';
-import { RootState } from '../../store';
 import { selectCurrentSearchView } from '../../data/user/user.selector';
 
 export const SearchPopover: React.FC = () => {
@@ -23,9 +22,7 @@ export const SearchPopover: React.FC = () => {
   });
 
   const dispatch = useDispatch();
-  const currentSearchView = useSelector((state: RootState) =>
-    selectCurrentSearchView(state),
-  );
+  const currentSearchView = useSelector(selectCurrentSearchView);
 
   return (
     <>

src/data/user/user.selector.ts

@@ -19,3 +19,14 @@ export const selectHasSeenTutorial = createSelector(
   selfUserState,
   (state) => state.hasSeenTutorial,
 );
+
+export const selectFavorites = createSelector(
+  selfUserState,
+  (state) => state.favorites,
+);
+
+export const selectIsFavorite = (chapterId: string) => {
+  return createSelector(selectFavorites, (favorites) =>
+    favorites.includes(chapterId),
+  );
+};

src/data/user/user.slice.ts

@@ -17,11 +17,13 @@ interface CurrentThemePayload {
 }
 
 type UserState = {
+  favorites: Array<string>;
   hasSeenTutorial: boolean;
 } & CurrentSearchView &
   CurrentTheme;
 
 const initialState: UserState = {
+  favorites: [],
   currentSearchView: 'card',
   currentTheme: 'system',
   hasSeenTutorial: false,
@@ -31,6 +33,14 @@ const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
+    addFavorite(state, action: PayloadAction<string>) {
+      state.favorites = [...state.favorites, action.payload];
+    },
+    removeFavorite(state, action: PayloadAction<string>) {
+      state.favorites = state.favorites.filter(
+        (favorite) => !favorite.includes(action.payload),
+      );
+    },
     resetUserState() {
       return initialState;
     },
@@ -56,6 +66,8 @@ const userSlice = createSlice({
 });
 
 export const {
+  addFavorite,
+  removeFavorite,
   resetUserState,
   setCurrentSearchView,
   setCurrentTheme,

src/pages/Settings/index.tsx

@@ -26,16 +26,13 @@ import { I18N_LANGUAGES_SUPPORTED } from '../../i18n';
 import { colorPaletteOutline, languageOutline } from 'ionicons/icons';
 import { THEMES } from '../../utils/theme';
 import { selectCurrentTheme } from '../../data/user/user.selector';
-import { RootState } from '../../store';
 import { resetUserState, setCurrentTheme } from '../../data/user/user.slice';
 
 export const SettingsPage: React.FC = () => {
   const { t, i18n } = useTranslation();
 
   const dispatch = useDispatch();
-  const currentTheme = useSelector((state: RootState) =>
-    selectCurrentTheme(state),
-  );
+  const currentTheme = useSelector(selectCurrentTheme);
 
   return (
     <IonPage>

src/reducers.ts

@@ -4,7 +4,6 @@
 
 import { combineReducers, Reducer } from 'redux';
 import { connectRouter } from 'connected-react-router';
-import chapterReducer from './data/chapter/chapter.reducer';
 import history from './utils/history';
 import userSlice from './data/user/user.slice';
 
@@ -13,7 +12,6 @@ import userSlice from './data/user/user.slice';
  */
 const createReducer = (injectedReducers = {}) => {
   const rootReducer = combineReducers({
-    chapter: chapterReducer,
     user: userSlice,
     router: connectRouter(history) as Reducer,
     ...injectedReducers,