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

- move current global state into user state - install package @reduxjs/[email protected] - uninstall package [email protected] - uninstall package [email protected]
Boehringer-Ingelheim · Dec 31, 2020 · 2082bc3 · 2082bc3
1 parent c8fa408
commit 2082bc3
Show file tree

Hide file tree

Showing 31 changed files with 254 additions and 461 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "@ionic/react": "^5.5.2",
     "@ionic/react-router": "^5.5.2",
     "@ionic/storage": "^2.3.1",
+    "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.6.0",
@@ -47,9 +48,7 @@
     "react-router-dom": "5.2.0",
     "react-scripts": "3.4.3",
     "redux": "^4.0.5",
-    "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0",
-    "redux-saga": "^1.1.3",
     "typescript": "4.0.5"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,7 @@ import React, { Suspense } from 'react';
 import { IonApp, IonRouterOutlet, IonSplitPane } from '@ionic/react';
 import { IonReactRouter } from '@ionic/react-router';
 import { Redirect, Route } from 'react-router-dom';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Menu } from './components/Menu';
 import Page from './pages/Page';
 import { ChapterPage } from './pages/Chapter';
@@ -24,20 +24,21 @@ import '@ionic/react/css/display.css';
 import './theme/bright.theme.css';
 import './theme/dark.theme.css';
 // import Tutorial from './pages/Tutorial';
-import Settings from './pages/Settings';
+import { SettingsPage } from './pages/Settings';
 import AboutPage from './pages/About';
 import { SearchPage } from './pages/Search';
-import { Theme } from './utils/theme';
+import { THEMES } from './utils/theme';
+import { selectCurrentTheme } from './data/user/user.selector';
+import { RootState } from './store';
 
-interface ContainerProps {
-  hasSeenTutorial: boolean;
-  selectedTheme: Theme;
-}
+const App: React.FC = () => {
+  const currentTheme = useSelector((state) =>
+    selectCurrentTheme(state as RootState),
+  );
 
-const App: React.FC<ContainerProps> = ({ selectedTheme }) => {
   return (
     <Suspense fallback="<App Suspense Loading>">
-      <IonApp className={selectedTheme.className}>
+      <IonApp className={THEMES[currentTheme].className}>
         <IonReactRouter>
           <IonSplitPane contentId="main">
             <Menu />
@@ -73,7 +74,7 @@ const App: React.FC<ContainerProps> = ({ selectedTheme }) => {
               <Route
                 path="/settings"
                 render={(props) => {
-                  return <Settings />;
+                  return <SettingsPage />;
                 }}
                 exact={true}
               />
@@ -90,17 +91,4 @@ const App: React.FC<ContainerProps> = ({ selectedTheme }) => {
   );
 };
 
-const mapStateToProps = (state: any) => {
-  return {
-    hasSeenTutorial: state.user.hasSeenTutorial,
-    selectedTheme: state.user.selectedTheme,
-  };
-};
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    // setSelectedPage: (page: string) => dispatch(setSelectedPage(page)),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default App;
diff --git a/src/components/Chapters/01/01.tsx b/src/components/Chapters/01/01.tsx
@@ -11,7 +11,7 @@ import {
 } from '@ionic/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0101: React.FC<ChapterProps> = ({ isCard = false }) => {

diff --git a/src/components/Chapters/01/02.tsx b/src/components/Chapters/01/02.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0102: React.FC<ChapterProps> = ({ isCard = false }) => {

diff --git a/src/components/Chapters/01/03.tsx b/src/components/Chapters/01/03.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0103: React.FC<ChapterProps> = ({ isCard = false }) => {

diff --git a/src/components/Chapters/01/04.tsx b/src/components/Chapters/01/04.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0104: React.FC<ChapterProps> = ({ isCard = false }) => {

diff --git a/src/components/Chapters/02/01.tsx b/src/components/Chapters/02/01.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0201: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/02/02.tsx b/src/components/Chapters/02/02.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0202: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/02/03.tsx b/src/components/Chapters/02/03.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0203: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/02/04.tsx b/src/components/Chapters/02/04.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0204: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/02/05.tsx b/src/components/Chapters/02/05.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0205: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/02/06.tsx b/src/components/Chapters/02/06.tsx
@@ -11,7 +11,7 @@ import {
   IonText,
 } from '@ionic/react';
 import { useTranslation } from 'react-i18next';
-import ChapterFooter from '../footer';
+import { ChapterFooter } from '../footer';
 import { ChapterProps } from '../types';
 
 export const Chapter0206: React.FC<ChapterProps> = (props) => {

diff --git a/src/components/Chapters/footer.tsx b/src/components/Chapters/footer.tsx
@@ -8,33 +8,35 @@ import {
 } from '@ionic/react';
 import { arrowBack, arrowForward, star, starOutline } from 'ionicons/icons';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import {
   addFavorite,
   removeFavorite,
 } from '../../data/chapter/chapter.actions';
-import { selectChapterFavorites } from '../../data/chapter/chapter.select';
-import { RootState } from '../../reducers';
+import { selectIsChapterFavorite } from '../../data/chapter/chapter.select';
+import { RootState } from '../../store';
 
-type ContainerProps = ReturnType<typeof mapStateToProps> &
-  ReturnType<typeof mapDispatchToProps> & {
-    previousChapter: string;
-    nextChapter: string;
-  };
+type ContainerProps = {
+  previousChapter: string;
+  nextChapter: string;
+};
 
-const ChapterFooter: React.FC<ContainerProps> = (props) => {
-  const { chapterFavorites, previousChapter, nextChapter } = props;
+export const ChapterFooter: React.FC<ContainerProps> = (props) => {
+  const { previousChapter, nextChapter } = props;
 
   const history = useHistory();
   const currentChapter = history.location.pathname;
-  const isFavorite = chapterFavorites.includes(currentChapter);
+  const isFavorite = useSelector((state) =>
+    selectIsChapterFavorite(state as RootState, currentChapter),
+  );
+  const dispatch = useDispatch();
 
   const toggleFavorite = () => {
     if (isFavorite) {
-      return props.removeFavorite(currentChapter);
+      return dispatch(removeFavorite(currentChapter));
     }
-    return props.addFavorite(currentChapter);
+    return dispatch(addFavorite(currentChapter));
   };
 
   return (
@@ -85,18 +87,3 @@ const ChapterFooter: React.FC<ContainerProps> = (props) => {
     </IonFooter>
   );
 };
-
-const mapStateToProps = (state: RootState) => {
-  return {
-    chapterFavorites: selectChapterFavorites(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    addFavorite: (chapterId: string) => dispatch(addFavorite(chapterId)),
-    removeFavorite: (chapterId: string) => dispatch(removeFavorite(chapterId)),
-  };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ChapterFooter);