Initial upgrade to redux toolkit, more fixes needed e.g. removing non…

…-serializable values from the state
actualbudget · Dec 17, 2024 · c53deaf · c53deaf
1 parent 94666a2
commit c53deaf
Show file tree

Hide file tree

Showing 121 changed files with 561 additions and 538 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -472,6 +472,42 @@ module.exports = {
         ],
       },
     },
+    {
+      files: ['./packages/desktop-client/**/*'],
+      excludedFiles: ['./packages/desktop-client/src/redux/index.ts'],
+      rules: {
+        'no-restricted-imports': [
+          'warn',
+          {
+            patterns: [
+              {
+                group: ['react-redux'],
+                importNames: ['useDispatch'],
+                message: 'Please use Actual’s useAppDispatch() hook instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      files: ['./packages/desktop-client/**/*'],
+      excludedFiles: ['./packages/desktop-client/src/redux/index.ts'],
+      rules: {
+        'no-restricted-imports': [
+          'warn',
+          {
+            patterns: [
+              {
+                group: ['react-redux'],
+                importNames: ['useSelector'],
+                message: 'Please use Actual’s useAppSelector() hook instead.',
+              },
+            ],
+          },
+        ],
+      },
+    },
     {
       files: ['./packages/loot-core/src/**/*'],
       rules: {

diff --git a/packages/desktop-client/package.json b/packages/desktop-client/package.json
@@ -10,6 +10,7 @@
     "@fontsource/redacted-script": "^5.0.21",
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.41.1",
+    "@reduxjs/toolkit": "^2.5.0",
     "@rollup/plugin-inject": "^5.0.5",
     "@svgr/cli": "^8.1.0",
     "@swc/core": "^1.5.3",
@@ -24,7 +25,6 @@
     "@types/react-dom": "^18.2.1",
     "@types/react-grid-layout": "^1",
     "@types/react-modal": "^3.16.0",
-    "@types/react-redux": "^7.1.25",
     "@types/uuid": "^9.0.2",
     "@types/webpack-bundle-analyzer": "^4.6.3",
     "@use-gesture/react": "^10.3.0",
@@ -61,15 +61,13 @@
     "react-i18next": "^14.1.2",
     "react-markdown": "^8.0.7",
     "react-modal": "3.16.1",
-    "react-redux": "7.2.9",
+    "react-redux": "^9.2.0",
     "react-router-dom": "6.21.3",
     "react-simple-pull-to-refresh": "^1.3.3",
     "react-spring": "^9.7.3",
     "react-stately": "^3.33.0",
     "react-virtualized-auto-sizer": "^1.0.21",
     "recharts": "^2.10.4",
-    "redux": "^4.2.1",
-    "redux-thunk": "^2.4.2",
     "remark-gfm": "^3.0.1",
     "rollup-plugin-visualizer": "^5.12.0",
     "sass": "^1.70.0",

diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx
@@ -9,7 +9,6 @@ import {
 } from 'react-error-boundary';
 import { HotkeysProvider } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
 import {
@@ -28,6 +27,7 @@ import {
 
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
+import { useAppDispatch } from '../redux';
 import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
@@ -48,7 +48,7 @@ function AppInner() {
   const [cloudFileId] = useMetadataPref('cloudFileId');
   const { t } = useTranslation();
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {
     if (global.Actual.isUpdateReadyForDownload()) {
@@ -139,7 +139,7 @@ export function App() {
   const [hiddenScrollbars, setHiddenScrollbars] = useState(
     hasHiddenScrollbars(),
   );
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   useEffect(() => {
     function checkScrollbars() {

diff --git a/packages/desktop-client/src/components/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
 import { css } from '@emotion/css';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
+import { useAppSelector } from '../redux';
 import { theme } from '../style';
 
 import { Background } from './Background';
@@ -16,7 +16,7 @@ type AppBackgroundProps = {
 };
 
 export function AppBackground({ isLoading }: AppBackgroundProps) {
-  const loadingText = useSelector(state => state.app.loadingText);
+  const loadingText = useAppSelector(state => state.app.loadingText);
   const showLoading = isLoading || loadingText !== null;
   const transitions = useTransition(loadingText, {
     from: { opacity: 0, transform: 'translateY(-100px)' },

diff --git a/packages/desktop-client/src/components/BankSyncStatus.tsx b/packages/desktop-client/src/components/BankSyncStatus.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
 import { Trans } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { useTransition, animated } from 'react-spring';
 
-import { type State } from 'loot-core/src/client/state-types';
-
+import { useAppSelector } from '../redux';
 import { theme, styles } from '../style';
 
 import { AnimatedRefresh } from './AnimatedRefresh';
 import { Text } from './common/Text';
 import { View } from './common/View';
 
 export function BankSyncStatus() {
-  const accountsSyncing = useSelector(
-    (state: State) => state.account.accountsSyncing,
+  const accountsSyncing = useAppSelector(
+    state => state.account.accountsSyncing,
   );
   const accountsSyncingCount = accountsSyncing.length;
   const count = accountsSyncingCount;

diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -1,7 +1,6 @@
 // @ts-strict-ignore
 import React, { type ReactElement, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
 import {
   Route,
   Routes,
@@ -11,13 +10,13 @@ import {
 } from 'react-router-dom';
 
 import { addNotification, sync } from 'loot-core/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
 import * as undo from 'loot-core/src/platform/client/undo';
 
 import { useAccounts } from '../hooks/useAccounts';
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useMetaThemeColor } from '../hooks/useMetaThemeColor';
 import { useNavigate } from '../hooks/useNavigate';
+import { useAppSelector, useAppDispatch } from '../redux';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
@@ -81,13 +80,11 @@ export function FinancesApp() {
   const { isNarrowWidth } = useResponsive();
   useMetaThemeColor(isNarrowWidth ? theme.mobileViewTheme : null);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
   const accounts = useAccounts();
-  const accountsLoaded = useSelector(
-    (state: State) => state.queries.accountsLoaded,
-  );
+  const accountsLoaded = useAppSelector(state => state.queries.accountsLoaded);
 
   const [lastUsedVersion, setLastUsedVersion] = useLocalPref(
     'flags.updateNotificationShownForVersion',

diff --git a/packages/desktop-client/src/components/HelpMenu.tsx b/packages/desktop-client/src/components/HelpMenu.tsx
@@ -1,7 +1,6 @@
 import { forwardRef, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Trans, useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { useToggle } from 'usehooks-ts';
@@ -11,6 +10,7 @@ import { pushModal } from 'loot-core/client/actions/modals';
 
 import { useFeatureFlag } from '../hooks/useFeatureFlag';
 import { SvgHelp } from '../icons/v2/Help';
+import { useAppDispatch } from '../redux';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';
@@ -52,7 +52,7 @@ export const HelpMenu = () => {
   const [isMenuOpen, toggleMenuOpen, setMenuOpen] = useToggle();
   const menuButtonRef = useRef(null);
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const page = useLocation().pathname;
 
   const handleItemSelect = (item: HelpMenuItem) => {

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -1,12 +1,11 @@
 // @ts-strict-ignore
 import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
 
 import { closeBudget, getUserData, signOut } from 'loot-core/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
 
 import { useNavigate } from '../hooks/useNavigate';
+import { useAppSelector, useAppDispatch } from '../redux';
 import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
@@ -27,9 +26,9 @@ export function LoggedInUser({
   color,
 }: LoggedInUserProps) {
   const { t } = useTranslation();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const userData = useSelector((state: State) => state.user.data);
+  const userData = useAppSelector(state => state.user.data);
   const [loading, setLoading] = useState(true);
   const [menuOpen, setMenuOpen] = useState(false);
   const serverUrl = useServerURL();

diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
@@ -8,7 +8,6 @@ import React, {
   type Dispatch,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 
 import { useSchedules } from 'loot-core/client/data-hooks/schedules';
 import { q } from 'loot-core/shared/query';
@@ -25,6 +24,7 @@ import { useAccounts } from '../hooks/useAccounts';
 import { useCategories } from '../hooks/useCategories';
 import { usePayees } from '../hooks/usePayees';
 import { useSelected, SelectedProvider } from '../hooks/useSelected';
+import { useAppDispatch } from '../redux';
 import { theme } from '../style';
 
 import { Button } from './common/Button2';
@@ -113,7 +113,7 @@ export function ManageRules({
   const [allRules, setAllRules] = useState([]);
   const [page, setPage] = useState(0);
   const [filter, setFilter] = useState('');
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const { schedules = [] } = useSchedules({
     query: useMemo(() => q('schedules').select('*'), []),

diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx
@@ -1,7 +1,6 @@
 // @ts-strict-ignore
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { closeModal } from 'loot-core/client/actions';
@@ -10,6 +9,7 @@ import * as monthUtils from 'loot-core/src/shared/months';
 
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useModalState } from '../hooks/useModalState';
+import { useAppDispatch } from '../redux';
 
 import { ModalTitle, ModalHeader } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';
@@ -73,7 +73,7 @@ import { NamespaceContext } from './spreadsheet/NamespaceContext';
 
 export function Modals() {
   const location = useLocation();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { modalStack } = useModalState();
   const [budgetId] = useMetadataPref('id');
 

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -7,16 +7,15 @@ import React, {
   type CSSProperties,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
 
 import { css } from '@emotion/css';
 
 import { removeNotification } from 'loot-core/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import { AnimatedLoading } from '../icons/AnimatedLoading';
 import { SvgDelete } from '../icons/v0';
+import { useAppSelector, useAppDispatch } from '../redux';
 import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
@@ -263,14 +262,12 @@ function Notification({
 }
 
 export function Notifications({ style }: { style?: CSSProperties }) {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { isNarrowWidth } = useResponsive();
-  const notifications = useSelector(
-    (state: State) => state.notifications.notifications,
-  );
-  const notificationInset = useSelector(
-    (state: State) => state.notifications.inset,
+  const notifications = useAppSelector(
+    state => state.notifications.notifications,
   );
+  const notificationInset = useAppSelector(state => state.notifications.inset);
   return (
     <View
       style={{

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { useDispatch } from 'react-redux';
 import { Routes, Route, useLocation } from 'react-router-dom';
 
 import { css } from '@emotion/css';
@@ -26,6 +25,7 @@ import {
   SvgViewHide,
   SvgViewShow,
 } from '../icons/v2';
+import { useAppDispatch } from '../redux';
 import { theme, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';
@@ -110,7 +110,7 @@ type SyncButtonProps = {
 function SyncButton({ style, isMobile = false }: SyncButtonProps) {
   const { t } = useTranslation();
   const [cloudFileId] = useMetadataPref('cloudFileId');
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const [syncing, setSyncing] = useState(false);
   const [syncState, setSyncState] = useState<
     null | 'offline' | 'local' | 'disabled' | 'error'

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useSelector, useDispatch } from 'react-redux';
 
 import { setAppState, updateApp } from 'loot-core/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
 
 import { SvgClose } from '../icons/v1';
+import { useAppSelector, useAppDispatch } from '../redux';
 import { theme } from '../style';
 
 import { Button } from './common/Button2';
@@ -15,12 +14,12 @@ import { View } from './common/View';
 
 export function UpdateNotification() {
   const { t } = useTranslation();
-  const updateInfo = useSelector((state: State) => state.app.updateInfo);
-  const showUpdateNotification = useSelector(
-    (state: State) => state.app.showUpdateNotification,
+  const updateInfo = useAppSelector(state => state.app.updateInfo);
+  const showUpdateNotification = useAppSelector(
+    state => state.app.showUpdateNotification,
   );
 
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const onRestart = () => {
     dispatch(updateApp());
   };