Skip to content

Commit

Permalink
feat: ✨ remove redux/toolkit
Browse files Browse the repository at this point in the history
  • Loading branch information
caorushizi committed Jan 1, 2025
1 parent f72fe35 commit 93c30e1
Show file tree
Hide file tree
Showing 21 changed files with 326 additions and 372 deletions.
2 changes: 0 additions & 2 deletions packages/renderer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-slot": "^1.1.0",
"@reduxjs/toolkit": "^2.2.5",
"@xterm/addon-fit": "^0.10.0",
"@xterm/xterm": "^5.5.0",
"ahooks": "^3.8.0",
Expand All @@ -39,7 +38,6 @@
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-i18next": "^14.1.2",
"react-redux": "^9.1.2",
"react-router-dom": "^6.23.1",
"socket.io-client": "^4.8.0",
"sort-by": "^1.2.0",
Expand Down
17 changes: 11 additions & 6 deletions packages/renderer/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { ConfigProvider, theme } from "antd";
import React, { FC, Suspense, lazy, useEffect } from "react";
import { useDispatch } from "react-redux";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { setAppStore, increase, setBrowserStore, PageMode } from "./store";
import "dayjs/locale/zh-cn";
import zhCN from "antd/locale/zh_CN";
import useElectron from "./hooks/electron";
Expand All @@ -14,6 +12,9 @@ import { ThemeContext } from "./context/ThemeContext";
import { SessionStore, useSessionStore } from "./store/session";
import { useShallow } from "zustand/react/shallow";
import { DOWNLOAD_FAIL, DOWNLOAD_SUCCESS, PAGE_LOAD } from "./const";
import { useAppStore, setAppStoreSelector } from "./store/app";
import { PageMode, setBrowserSelector, useBrowserStore } from "./store/browser";
import { downloadStoreSelector, useDownloadStore } from "./store/download";

const AppLayout = lazy(() => import("./layout/App"));
const HomePage = lazy(() => import("./pages/HomePage"));
Expand All @@ -32,12 +33,14 @@ const sessionSelector = (s: SessionStore) => ({
});

const App: FC = () => {
const dispatch = useDispatch();
const [appTheme, setAppTheme] = React.useState<"dark" | "light">("light");
const { addIpcListener, removeIpcListener, getMachineId } = useElectron();
const { setUpdateAvailable, setUploadChecking } = useSessionStore(
useShallow(sessionSelector),
);
const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
const { setBrowserStore } = useBrowserStore(useShallow(setBrowserSelector));
const { increase } = useDownloadStore(useShallow(downloadStoreSelector));

const themeChange = (event: MediaQueryListEvent) => {
if (event.matches) {
Expand All @@ -49,17 +52,19 @@ const App: FC = () => {

// 监听store变化
const onAppStoreChange = (event: any, store: AppStore) => {
dispatch(setAppStore(store));
setAppStore(store);
};

const onReceiveDownloadItem = () => {
dispatch(increase());
increase();
};

const onChangePrivacy = () => {
dispatch(setBrowserStore({ url: "", title: "", mode: PageMode.Default }));
setBrowserStore({ url: "", title: "", mode: PageMode.Default });
};

console.log("App.tsx: onAppStoreChange", onAppStoreChange);

useEffect(() => {
const updateAvailable = () => {
setUpdateAvailable(true);
Expand Down
8 changes: 4 additions & 4 deletions packages/renderer/src/layout/App.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import React, { FC, useEffect } from "react";
import { Outlet, useLocation } from "react-router-dom";
import useElectron from "../hooks/electron";
import { useDispatch } from "react-redux";
import { setAppStore } from "../store";
import { useAsyncEffect } from "ahooks";
import { AppHeader } from "./AppHeader";
import { AppSideBar } from "./AppSideBar";
import { tdApp } from "@/utils";
import { CHANGE_PAGE } from "@/const";
import { useAppStore, setAppStoreSelector } from "@/store/app";
import { useShallow } from "zustand/react/shallow";

const App: FC = () => {
const { getAppStore: ipcGetAppStore } = useElectron();
const dispatch = useDispatch();
const location = useLocation();
const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));

useAsyncEffect(async () => {
const store = await ipcGetAppStore();
dispatch(setAppStore(store));
setAppStore(store);
}, []);

useEffect(() => {
Expand Down
20 changes: 13 additions & 7 deletions packages/renderer/src/layout/AppSideBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import React, { cloneElement, PropsWithChildren, ReactElement } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { Badge } from "antd";
import useElectron from "../hooks/electron";
import { useDispatch, useSelector } from "react-redux";
import { selectAppStore, setAppStore, clearCount, selectCount } from "../store";
import { useTranslation } from "react-i18next";
import { cn, isWeb } from "@/utils";
import {
Expand All @@ -17,6 +15,12 @@ import {
import siderBg from "@/assets/images/sider-bg.png";
import { SessionStore, useSessionStore } from "@/store/session";
import { useShallow } from "zustand/react/shallow";
import {
useAppStore,
appStoreSelector,
setAppStoreSelector,
} from "@/store/app";
import { downloadStoreSelector, useDownloadStore } from "@/store/download";

function processLocation(pathname: string) {
let name = pathname;
Expand Down Expand Up @@ -83,9 +87,11 @@ export function AppSideBar({ className }: Props) {
const { t } = useTranslation();
const location = useLocation();
const navigate = useNavigate();
const dispatch = useDispatch();
const count = useSelector(selectCount);
const appStore = useSelector(selectAppStore);
const { count, clearCount } = useDownloadStore(
useShallow(downloadStoreSelector),
);
const appStore = useAppStore(useShallow(appStoreSelector));
const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
const { updateAvailable } = useSessionStore(useShallow(sessionSelector));

const activeKey = processLocation(location.pathname);
Expand All @@ -94,7 +100,7 @@ export function AppSideBar({ className }: Props) {
e.stopPropagation();
e.preventDefault();

dispatch(setAppStore({ openInNewWindow: true }));
setAppStore({ openInNewWindow: true });
if (location.pathname === "/source") {
navigate("/");
}
Expand All @@ -109,7 +115,7 @@ export function AppSideBar({ className }: Props) {
<AppMenuItem
link="/"
onClick={() => {
dispatch(clearCount());
clearCount();
}}
activeKey={activeKey}
icon={<ListIcon />}
Expand Down
6 changes: 1 addition & 5 deletions packages/renderer/src/main.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import "antd/dist/reset.css";
import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import { tdApp } from "./utils";
Expand All @@ -15,8 +13,6 @@ tdApp.init();

createRoot(document.getElementById("root") as HTMLElement).render(
<StrictMode>
<Provider store={store}>
<App />
</Provider>
<App />
</StrictMode>,
);
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,6 @@ import { DownloadStatus } from "@/types";
import { Progress } from "antd";
import { PauseCircleOutlined, PlayCircleOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import { useSelector } from "react-redux";
import { selectAppStore } from "@/store";
import selectedBg from "@/assets/images/select-item-bg.png";
import {
DownloadIcon,
Expand All @@ -28,6 +26,8 @@ import {
STOP_DOWNLOAD,
} from "@/const";
import { TerminalDrawer } from "./TerminalDrawer";
import { useAppStore, appStoreSelector } from "@/store/app";
import { useShallow } from "zustand/react/shallow";

interface Props {
item: VideoStat;
Expand All @@ -50,7 +50,7 @@ export function DownloadItem({
onShowEditForm,
progress,
}: Props) {
const appStore = useSelector(selectAppStore);
const appStore = useAppStore(useShallow(appStoreSelector));
const { t } = useTranslation();
const { openPlayerWindow } = useElectron();

Expand Down
5 changes: 2 additions & 3 deletions packages/renderer/src/pages/HomePage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import PageContainer from "../../components/PageContainer";
import { useMemoizedFn, useMount, usePagination } from "ahooks";
import useElectron from "../../hooks/electron";
import { DownloadFilter, DownloadType } from "../../types";
import { useSelector } from "react-redux";
import { selectAppStore } from "../../store";
import { useTranslation } from "react-i18next";
import { DownloadList } from "./components";
import DownloadForm, {
Expand All @@ -21,6 +19,7 @@ import { useShallow } from "zustand/react/shallow";
import { isDownloadType, isWeb, randomName, tdApp } from "@/utils";
import { CLICK_DOWNLOAD } from "@/const";
import { useLocation } from "react-router-dom";
import { useAppStore, appStoreSelector } from "@/store/app";

interface Props {
filter?: DownloadFilter;
Expand All @@ -42,7 +41,7 @@ const HomePage: FC<Props> = ({ filter = DownloadFilter.list }) => {
downloadNow,
getLocalIP,
} = useElectron();
const appStore = useSelector(selectAppStore);
const appStore = useAppStore(useShallow(appStoreSelector));
const { t } = useTranslation();
const [localIP, setLocalIP] = useState<string>("");
const newFormRef = useRef<DownloadFormRef>(null);
Expand Down
15 changes: 9 additions & 6 deletions packages/renderer/src/pages/SettingPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,11 @@ import {
FolderOpenOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { selectAppStore, setAppStore } from "../../store";
import { useDispatch, useSelector } from "react-redux";
import {
useAppStore,
appStoreSelector,
setAppStoreSelector,
} from "@/store/app";
import useElectron from "../../hooks/electron";
import { useMemoizedFn, useRequest } from "ahooks";
import { AppLanguage, AppTheme } from "../../types";
Expand Down Expand Up @@ -75,10 +78,10 @@ const SettingPage: React.FC = () => {
removeIpcListener,
installUpdate,
} = useElectron();
const dispatch = useDispatch();
const { t } = useTranslation();
const formRef = useRef<FormInstance<AppStore>>();
const settings = useSelector(selectAppStore);
const settings = useAppStore(useShallow(appStoreSelector));
const { setAppStore } = useAppStore(useShallow(setAppStoreSelector));
const { data: envPath } = useRequest(getEnvPath);
const [messageApi, contextHolder] = message.useMessage();
const { updateAvailable, updateChecking } = useSessionStore(
Expand All @@ -95,7 +98,7 @@ const SettingPage: React.FC = () => {
const onSelectDir = async () => {
const local = await onSelectDownloadDir();
if (local) {
dispatch(setAppStore({ local }));
setAppStore({ local });
formRef.current?.setFieldValue("local", local);
}
};
Expand All @@ -119,7 +122,7 @@ const SettingPage: React.FC = () => {
await ipcSetAppStore(key, values[key]);
}
}
dispatch(setAppStore(values));
setAppStore(values);
} catch (e: any) {
messageApi.error(e.message);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,18 @@ import { Button } from "@/components/ui/button";
import WebView from "@/components/WebView";
import useElectron from "@/hooks/electron";
import {
addSource,
BrowserStatus,
deleteSource,
browserStoreSelector,
PageMode,
selectBrowserStore,
setBrowserStore,
} from "@/store";
setBrowserSelector,
useBrowserStore,
} from "@/store/browser";
import { generateUrl, randomName } from "@/utils";
import { useMemoizedFn } from "ahooks";
import { Empty, Space, Spin, message, Splitter } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useDispatch, useSelector } from "react-redux";
import { useShallow } from "zustand/react/shallow";

export function BrowserView() {
const {
Expand All @@ -30,10 +29,12 @@ export function BrowserView() {
showDownloadDialog: ipcShowDownloadDialog,
} = useElectron();
const downloadForm = useRef<DownloadFormRef>(null);
const store = useSelector(selectBrowserStore);
const store = useBrowserStore(useShallow(browserStoreSelector));
const { addSource, setBrowserStore, deleteSource } = useBrowserStore(
useShallow(setBrowserSelector),
);
const { t } = useTranslation();
const [placeHolder, setPlaceHolder] = useState<string>("");
const dispatch = useDispatch();
const [messageApi, contextHolder] = message.useMessage();

useEffect(() => {
Expand All @@ -57,7 +58,7 @@ export function BrowserView() {
};

const onWebviewLinkMessage = async (e: unknown, data: any) => {
dispatch(addSource(data));
addSource(data);
};

addIpcListener("show-download-dialog", onShowDownloadDialog);
Expand All @@ -71,13 +72,11 @@ export function BrowserView() {

const onClickGoHome = async () => {
await webviewGoHome();
dispatch(
setBrowserStore({
url: "",
title: "",
mode: PageMode.Default,
}),
);
setBrowserStore({
url: "",
title: "",
mode: PageMode.Default,
});
};

const confirmDownload = async (now?: boolean) => {
Expand Down Expand Up @@ -106,13 +105,11 @@ export function BrowserView() {
};

const loadUrl = (url: string) => {
dispatch(
setBrowserStore({
url,
mode: PageMode.Browser,
status: BrowserStatus.Loading,
}),
);
setBrowserStore({
url,
mode: PageMode.Browser,
status: BrowserStatus.Loading,
});
webviewLoadURL(url);
};

Expand Down Expand Up @@ -196,7 +193,7 @@ export function BrowserView() {
<IconButton
icon={<DeleteIcon />}
onClick={() => {
dispatch(deleteSource(item.url));
deleteSource(item.url);
}}
/>
</div>
Expand Down
Loading

0 comments on commit 93c30e1

Please sign in to comment.