[Redux Toolkit Migration] Use new Redux Toolkit configureStore API (#…

…4000)

* Initial upgrade to redux toolkit, more fixes needed e.g. removing non-serializable values from the state

* Fix typecheck and lint

* Fix lint and typecheck errors

* Fix lint and typecheck errors

* Fix typecheck error

* Cleanup

* Remove useAppStore

* Cleanup

* Undo renames

* Code review feedback

* UndoState type

* UndoState type

* yarn install

packages/desktop-client/package.json

@@ -24,7 +24,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 +60,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",

packages/desktop-client/src/auth/AuthProvider.tsx

@@ -1,9 +1,7 @@
 import React, { createContext, useContext, type ReactNode } from 'react';
-import { useSelector } from 'react-redux';
-
-import { type State } from 'loot-core/client/state-types';
 
 import { useServerURL } from '../components/ServerContext';
+import { useSelector } from '../redux';
 
 import { type Permissions } from './types';
 
@@ -18,7 +16,7 @@ type AuthProviderProps = {
 };
 
 export const AuthProvider = ({ children }: AuthProviderProps) => {
-  const userData = useSelector((state: State) => state.user.data);
+  const userData = useSelector(state => state.user.data);
   const serverUrl = useServerURL();
 
   const hasPermission = (permission?: Permissions) => {

packages/desktop-client/src/auth/ProtectedRoute.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { useSelector } from 'react-redux';
 
 import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
 
 import { View } from '../components/common/View';
 import { useMetadataPref } from '../hooks/useMetadataPref';
+import { useSelector } from '../redux';
 
 import { useAuth } from './AuthProvider';
 import { type Permissions } from './types';

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, useSelector } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 
 import {
@@ -20,7 +19,6 @@ import {
   sync,
 } from 'loot-core/client/actions';
 import { SpreadsheetProvider } from 'loot-core/client/SpreadsheetProvider';
-import { type State } from 'loot-core/client/state-types';
 import * as Platform from 'loot-core/src/client/platform';
 import {
   init as initConnection,
@@ -30,6 +28,7 @@ import {
 import { useActions } from '../hooks/useActions';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { installPolyfills } from '../polyfills';
+import { useDispatch, useSelector } from '../redux';
 import { styles, hasHiddenScrollbars, ThemeStyle, useTheme } from '../style';
 import { ExposeNavigate } from '../util/router-tools';
 
@@ -51,7 +50,7 @@ function AppInner() {
   const { t } = useTranslation();
   const { showBoundary: showErrorBoundary } = useErrorBoundary();
   const dispatch = useDispatch();
-  const userData = useSelector((state: State) => state.user.data);
+  const userData = useSelector(state => state.user.data);
   const { signOut, addNotification } = useActions();
 
   const maybeUpdate = async <T,>(cb?: () => T): Promise<T> => {

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 { useSelector } from '../redux';
 import { theme } from '../style';
 
 import { Background } from './Background';

packages/desktop-client/src/components/BankSyncStatus.tsx

@@ -1,20 +1,16 @@
 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 { useSelector } 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 = useSelector(state => state.account.accountsSyncing);
   const accountsSyncingCount = accountsSyncing.length;
   const count = accountsSyncingCount;
 

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,7 +10,6 @@ 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 { ProtectedRoute } from '../auth/ProtectedRoute';
@@ -20,6 +18,7 @@ import { useAccounts } from '../hooks/useAccounts';
 import { useLocalPref } from '../hooks/useLocalPref';
 import { useMetaThemeColor } from '../hooks/useMetaThemeColor';
 import { useNavigate } from '../hooks/useNavigate';
+import { useSelector, useDispatch } from '../redux';
 import { theme } from '../style';
 import { getIsOutdated, getLatestVersion } from '../util/versions';
 
@@ -90,9 +89,7 @@ export function FinancesApp() {
   const { t } = useTranslation();
 
   const accounts = useAccounts();
-  const accountsLoaded = useSelector(
-    (state: State) => state.queries.accountsLoaded,
-  );
+  const accountsLoaded = useSelector(state => state.queries.accountsLoaded);
 
   const [lastUsedVersion, setLastUsedVersion] = useLocalPref(
     'flags.updateNotificationShownForVersion',

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 { useDispatch } from '../redux';
 
 import { Button } from './common/Button2';
 import { Menu } from './common/Menu';

packages/desktop-client/src/components/LoggedInUser.tsx

@@ -1,17 +1,16 @@
 import React, { useState, useEffect, useRef, type CSSProperties } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 
 import { closeBudget, getUserData, signOut } from 'loot-core/client/actions';
-import { type State } from 'loot-core/src/client/state-types';
 import { type RemoteFile, type SyncedLocalFile } from 'loot-core/types/file';
 import { type TransObjectLiteral } from 'loot-core/types/util';
 
 import { useAuth } from '../auth/AuthProvider';
 import { Permissions } from '../auth/types';
 import { useMetadataPref } from '../hooks/useMetadataPref';
 import { useNavigate } from '../hooks/useNavigate';
+import { useSelector, useDispatch } from '../redux';
 import { theme, styles } from '../style';
 
 import { Button } from './common/Button2';
@@ -36,7 +35,7 @@ export function LoggedInUser({
   const { t } = useTranslation();
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const userData = useSelector((state: State) => state.user.data);
+  const userData = useSelector(state => state.user.data);
   const [loading, setLoading] = useState(true);
   const [menuOpen, setMenuOpen] = useState(false);
   const serverUrl = useServerURL();
@@ -51,7 +50,7 @@ export function LoggedInUser({
     f => f.state === 'remote' || f.state === 'synced' || f.state === 'detached',
   ) as (SyncedLocalFile | RemoteFile)[];
   const currentFile = remoteFiles.find(f => f.cloudFileId === cloudFileId);
-  const hasSyncedPrefs = useSelector((state: State) => state.prefs.synced);
+  const hasSyncedPrefs = useSelector(state => state.prefs.synced);
 
   useEffect(() => {
     async function init() {

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 { useDispatch } from '../redux';
 import { theme } from '../style';
 
 import { Button } from './common/Button2';

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 { useDispatch } from '../redux';
 
 import { ModalTitle, ModalHeader } from './common/Modal';
 import { AccountAutocompleteModal } from './modals/AccountAutocompleteModal';

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 { useSelector, useDispatch } from '../redux';
 import { styles, theme } from '../style';
 
 import { Button, ButtonWithLoading } from './common/Button2';
@@ -265,12 +264,8 @@ function Notification({
 export function Notifications({ style }: { style?: CSSProperties }) {
   const dispatch = useDispatch();
   const { isNarrowWidth } = useResponsive();
-  const notifications = useSelector(
-    (state: State) => state.notifications.notifications,
-  );
-  const notificationInset = useSelector(
-    (state: State) => state.notifications.inset,
-  );
+  const notifications = useSelector(state => state.notifications.notifications);
+  const notificationInset = useSelector(state => state.notifications.inset);
   return (
     <View
       style={{

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 { useDispatch } from '../redux';
 import { theme, styles } from '../style';
 
 import { AccountSyncCheck } from './accounts/AccountSyncCheck';

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 { useSelector, useDispatch } from '../redux';
 import { theme } from '../style';
 
 import { Button } from './common/Button2';
@@ -15,9 +14,9 @@ import { View } from './common/View';
 
 export function UpdateNotification() {
   const { t } = useTranslation();
-  const updateInfo = useSelector((state: State) => state.app.updateInfo);
+  const updateInfo = useSelector(state => state.app.updateInfo);
   const showUpdateNotification = useSelector(
-    (state: State) => state.app.showUpdateNotification,
+    state => state.app.showUpdateNotification,
   );
 
   const dispatch = useDispatch();

packages/desktop-client/src/components/accounts/Account.tsx

@@ -8,7 +8,6 @@ import React, {
   useEffect,
 } from 'react';
 import { Trans } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { Navigate, useParams, useLocation } from 'react-router-dom';
 
 import { debounce } from 'debounce';
@@ -29,6 +28,7 @@ import {
   type PagedQuery,
 } from 'loot-core/src/client/query-helpers';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
+import * as undo from 'loot-core/src/platform/client/undo';
 import { currentDay } from 'loot-core/src/shared/months';
 import { q, type Query } from 'loot-core/src/shared/query';
 import {
@@ -68,6 +68,7 @@ import {
 } from '../../hooks/useSplitsExpanded';
 import { useSyncedPref } from '../../hooks/useSyncedPref';
 import { useTransactionBatchActions } from '../../hooks/useTransactionBatchActions';
+import { useSelector } from '../../redux';
 import { styles, theme } from '../../style';
 import { Button } from '../common/Button2';
 import { Text } from '../common/Text';
@@ -261,8 +262,6 @@ type AccountInternalProps = {
   showExtraBalances?: boolean;
   setShowExtraBalances: (newValue: boolean) => void;
   modalShowing?: boolean;
-  setLastUndoState: (state: null) => void;
-  lastUndoState: { current: UndoState | null };
   accounts: AccountEntity[];
   getPayees: () => Promise<PayeeEntity[]>;
   updateAccount: (newAccount: AccountEntity) => void;
@@ -412,7 +411,7 @@ class AccountInternal extends PureComponent<
         }
       }
 
-      this.props.setLastUndoState(null);
+      undo.setUndoState('undoEvent', null);
     };
 
     const unlistens = [listen('undo-event', onUndo)];
@@ -428,8 +427,9 @@ class AccountInternal extends PureComponent<
 
     // If there is a pending undo, apply it immediately (this happens
     // when an undo changes the location to this page)
-    if (this.props.lastUndoState && this.props.lastUndoState.current) {
-      onUndo(this.props.lastUndoState.current);
+    const lastUndoEvent = undo.getUndoState('undoEvent');
+    if (lastUndoEvent) {
+      onUndo(lastUndoEvent);
     }
   }
 
@@ -1884,7 +1884,6 @@ export function Account() {
   );
   const modalShowing = useSelector(state => state.modals.modalStack.length > 0);
   const accountsSyncing = useSelector(state => state.account.accountsSyncing);
-  const lastUndoState = useSelector(state => state.app.lastUndoState);
   const filterConditions = location?.state?.filterConditions || [];
 
   const savedFiters = useFilters();
@@ -1923,7 +1922,6 @@ export function Account() {
           payees={payees}
           modalShowing={modalShowing}
           accountsSyncing={accountsSyncing}
-          lastUndoState={lastUndoState}
           filterConditions={filterConditions}
           categoryGroups={categoryGroups}
           {...actionCreators}