使用zustand，删除多层透传

buyfakett · Feb 25, 2025 · da48301 · da48301
1 parent bd02611
commit da48301
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+2025-02-25 使用zustand，删除多层透传
+
 2025-02-21 所有界面加上评论
 
 2025-02-21 项目升级`Tailwind CSS`到v4

diff --git a/package.json b/package.json
@@ -21,7 +21,8 @@
     "react-markdown": "^10.0.0",
     "react-router": "^7.2.0",
     "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.3"
   },
   "scripts": {
     "start": "rsbuild dev",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Route, Routes } from 'react-router';
 import AboutMe from '@/view/AboutMe';
 import { apiList, imgUrl, umamiId, umamiScript } from '@/config';
-import { waka_timeDefaultData } from '@/default_data/waka_time';
 import { buildInfo } from '@/default_data/buildInfo';
 import Tools from '@/view/Tools';
 import Urls from '@/view/Urls';
@@ -13,6 +12,7 @@ import ChangeLog from '@/util/ChangeLog';
 import Coffee from '@/view/Coffee';
 import Projects from '@/view/Projects/index';
 import Layout from '@/layout/index';
+import useWakatimeStore from '@/stores/wakatime';
 
 const App = () => {
     // semi-design的主题默认为暗色
@@ -21,7 +21,7 @@ const App = () => {
     // 判断当前环境是生产环境还是开发环境
     const isProduction = process.env.NODE_ENV === 'production';
 
-    const [wakatimeData, setwakatimeData] = useState(waka_timeDefaultData);
+    const setwakatimeData = useWakatimeStore((state) => state.setwakatimeData);
 
     useEffect(() => {
         // 动态设置 Favicon
@@ -67,10 +67,7 @@ const App = () => {
             )}
             <Routes>
                 <Route element={<Layout />}>
-                    <Route
-                        path="/"
-                        element={<AboutMe wakatimeData={wakatimeData} />}
-                    />
+                    <Route path="/" element={<AboutMe />} />
                     <Route path="/tools" element={<Tools />} />
                     <Route path="/urls" element={<Urls />} />
                     <Route path="/pictures" element={<Pictures />} />

diff --git a/src/stores/wakatime.jsx b/src/stores/wakatime.jsx
@@ -0,0 +1,9 @@
+import { create } from 'zustand';
+import { waka_timeDefaultData } from '@/default_data/waka_time';
+
+const useWakatimeStore = create((set) => ({
+    wakatimeData: waka_timeDefaultData,
+    setwakatimeData: (newVal) => set(() => ({ wakatimeData: newVal })),
+}));
+
+export default useWakatimeStore;
diff --git a/src/view/AboutMe/LanguageSection.jsx b/src/view/AboutMe/LanguageSection.jsx
@@ -5,8 +5,11 @@ import { NumberTicker } from '@/view/magicui/NumberTicker';
 import { TypingAnimation } from '@/view/magicui/TypingAnimation';
 import SkillSection from './SkillSection';
 import { languageSkillData } from '@/config';
+import useWakatimeStore from '@/stores/wakatime';
+
+const LanguageSection = () => {
+    const wakatimeData = useWakatimeStore((state) => state.wakatimeData);
 
-const LanguageSection = ({ start_time, languages, update_time }) => {
     return (
         <>
             {/* 文字介绍 */}
@@ -34,12 +37,12 @@ const LanguageSection = ({ start_time, languages, update_time }) => {
                     target="_blank"
                     rel="wakatime"
                     className="text-gray-500 text-sm hover:text-gray-700">
-                    data statistics form {start_time}
+                    data statistics form {wakatimeData.start_time}
                     <br />
-                    last update at {update_time}
+                    last update at {wakatimeData.update_time}
                 </a>
                 <div className="space-y-4 mt-4">
-                    {languages.map((lang, index) => (
+                    {wakatimeData.languages.map((lang, index) => (
                         <motion.div
                             key={lang.name}
                             className="w-full bg-gray-800 rounded-lg overflow-hidden"

diff --git a/src/view/AboutMe/index.jsx b/src/view/AboutMe/index.jsx
@@ -7,7 +7,7 @@ import { pageVariants } from '@/config';
 import OpenSourceProjects from './OpenSourceProjects';
 import Links from './Links';
 
-const AboutMe = ({ wakatimeData }) => {
+const AboutMe = () => {
     return (
         <motion.div
             className="min-h-screen dark:bg-gray-900 text-white flex flex-col items-center justify-center p-4"
@@ -20,11 +20,7 @@ const AboutMe = ({ wakatimeData }) => {
 
             <Links />
 
-            <LanguageSection
-                start_time={wakatimeData.start_time}
-                languages={wakatimeData.languages}
-                update_time={wakatimeData.update_time}
-            />
+            <LanguageSection />
 
             <WorkExperience />